Kelompok Kerja CSS Di TPAC: Apa yang Baru di CSS?

Minggu lalu, saya menghadiri W3C TPAC serta pertemuan Kelompok Kerja CSS di sana. Berbagai perubahan dilakukan pada spesifikasi, dan diskusi yang saya rasa menarik bagi desainer dan pengembang web. Pada artikel ini, saya akan menjelaskan sedikit tentang apa yang terjadi di TPAC, dan menunjukkan beberapa contoh dan demo dari hal-hal yang kami diskusikan di TPAC untuk CSS pada khususnya.

Apa itu TPAC?

TPAC adalah Pekan Pertemuan Technical Plenary / Advisory Committee dari W3C. Sebuah kesempatan bagi semua kelompok kerja yang berbeda yang merupakan bagian dari W3C untuk berkumpul di bawah satu atap. Acara ini di belahan dunia yang berbeda setiap tahunnya, tahun ini diadakan di Lyon, Perancis. Di TPAC, Kelompok Kerja seperti Kelompok Kerja CSS mengadakan pertemuan mereka sendiri, seperti yang kami lakukan di waktu lain dalam setahun. Namun, karena kita semua berada dalam satu gedung, berarti orang-orang dari kelompok lain bisa lebih mudah datang sebagai pengamat, dan kepentingan lintas kelompok kerja bisa didiskusikan.

Peserta TPAC biasanya adalah anggota dari satu atau lebih Kelompok Kerja, yang mengerjakan teknologi W3C. Mereka akan menjadi perwakilan dari organisasi anggota atau Pakar yang Diundang. Seperti pertemuan Kelompok Kerja W3C lainnya, risalah dari semua diskusi yang diadakan di TPAC akan tersedia secara terbuka, biasanya sebagai catatan IRC selama pertemuan.

Kelompok Kerja CSS

Kelompok Kerja CSS bertemu tatap muka di TPAC dan setidaknya dua kali dalam setahun; ini adalah tambahan untuk panggilan telepon mingguan kami. Pada semua pertemuan kami, berbagai masalah yang diangkat pada spesifikasi dibahas, dan keputusan dibuat. Beberapa masalah disimpan untuk diskusi tatap muka karena manfaat dapat memilikinya dengan seluruh kelompok, atau hanya dapat berkeliling papan tulis atau melihat demo di layar.

Ketika suatu masalah dibahas dalam rapat apa pun (baik tatap muka atau telekonferensi), masalah GitHub yang relevan diperbarui dengan risalah diskusi. Ini berarti jika Anda memiliki masalah yang ingin Anda lacak, Anda dapat membintanginya dan melihat kapan itu diperbarui. Risalah IRC lengkap juga diposting ke milis bergaya www.

Berikut adalah pilihan dari hal-hal yang kami diskusikan yang menurut saya paling menarik bagi Anda.

Scrollbar CSS

Spesifikasi Scrollbars CSS berusaha memberikan cara standar untuk menata ukuran dan warna scrollbar. Jika Anda memiliki Firefox Nightly, Anda dapat mengujinya. Untuk melihat contoh di bawah, gunakan Firefox Nightly dan aktifkan flags layout.css.scrollbar-width.enabled dan layout.css.scrollbar-color.enabled dengan mengunjungi https://about:config di Firefox Nightly.

Spesifikasi memberi kita dua properti baru: scrollbar-width dan scrollbar-color . Properti scrollbar-width dapat mengambil nilai auto , thin , none , atau length (seperti 1em ). Sepertinya nilai length dapat dihapus dari spesifikasi. Seperti yang dapat Anda bayangkan, mungkin bagi pengembang web untuk membuat bilah gulir yang sangat tidak dapat digunakan dengan bermain dengan lebarnya, jadi mungkin lebih baik mengizinkan browser untuk memutuskan lebar yang tepat yang masuk akal, tetapi sebaliknya menunjukkan tipis atau tebal. scrollbar. Firefox belum menerapkan opsi panjang.

Jika Anda menggunakan auto sebagai nilainya, maka browser akan menggunakan scrollbar default: thin akan memberi Anda scrollbar tipis, dan none yang akan menampilkan scrollbar yang tidak terlihat (tetapi elemen masih dapat digulir).

Di browser dengan dukungan untuk CSS Scrollbars, Anda dapat melihat ini beraksi di demo:

Properti scrollbar-color berhubungan dengan — seperti yang Anda harapkan — warna scrollbar. Scrollbar memiliki dua bagian yang mungkin ingin Anda warnai secara independen:

• ibu jari
  Penggeser yang bergerak ke atas dan ke bawah saat Anda menggulir.
• melacak
  Latar belakang bilah gulir.

Nilai untuk properti scrollbar-color adalah auto , dark , light dan <color> <color> .

Menggunakan auto sebagai nilai kata kunci akan memberi Anda warna bilah gulir default untuk browser itu, dark akan memberikan bilah gulir gelap, baik dalam mode gelap platform itu atau mode gelap khusus, mode light platform atau mode cahaya khusus .

Untuk mengatur warna Anda sendiri, Anda menambahkan dua warna sebagai nilai yang dipisahkan oleh spasi. Warna pertama akan digunakan untuk ibu jari dan yang kedua untuk trek . Anda harus berhati-hati agar ada kontras yang cukup antara warna, karena jika tidak, bilah gulir mungkin sulit digunakan untuk sebagian orang.

Di browser dengan dukungan untuk CSS Scrollbars, Anda dapat melihat ini di demo:

Unit Rasio Aspek

Kami telah menggunakan peretasan padding di CSS untuk mencapai kotak rasio aspek untuk beberapa waktu, namun, dengan munculnya Tata Letak Kotak dan cara yang lebih baik untuk mengukur konten, memiliki cara nyata untuk melakukan rasio aspek dalam CSS telah menjadi kebutuhan yang lebih mendesak. .

Ada dua masalah yang diangkat di GitHub yang terkait dengan persyaratan ini:

• Unit Rasio Aspek Dibutuhkan
• Rasio Aspek.

Sekarang ada draf spesifikasi di Level 4 Ukuran CSS, dan keputusan rapat adalah bahwa ini memerlukan diskusi lebih lanjut di GitHub sebelum keputusan dapat dibuat. Jadi, jika Anda tertarik dengan ini, atau memiliki kasus penggunaan tambahan, Kelompok Kerja CSS akan tertarik dengan komentar Anda tentang masalah tersebut.

:where() Fungsional Pseudo-Class

Tahun lalu, CSSWG memutuskan untuk menambahkan pseudo-class yang bertindak seperti :matches() tetapi dengan nol spesifisitas, sehingga memudahkan untuk menimpa tanpa perlu secara artifisial meningkatkan spesifisitas elemen selanjutnya untuk menimpa sesuatu dalam stylesheet default.

Kelas semu :matches() mungkin baru bagi Anda karena merupakan Pemilih Level 4, namun, ini memungkinkan Anda untuk menentukan sekelompok pemilih untuk menerapkan beberapa CSS. Misalnya, Anda dapat menulis:

 .foo a:hover, pa:hover { color: green; }

Atau dengan :matches()

 :matches(.foo, p) a:hover { color: green; }

Jika Anda pernah memiliki banyak pemilih hanya untuk menetapkan beberapa aturan yang sama, Anda akan melihat betapa bergunanya ini. CodePen berikut menggunakan nama prefiks webkit-any dan -moz-any untuk mendemonstrasikan fungsionalitas matches() . Anda juga dapat membaca lebih lanjut tentang kecocokan() di MDN.

Di mana kita sering melakukan penumpukan pemilih semacam ini, dan dengan demikian di mana :matches() akan paling berguna adalah dalam semacam lembar gaya default awal. Namun, kita kemudian perlu berhati-hati saat menimpa default tersebut karena setiap penimpaan dilakukan dengan cara yang akan memastikannya lebih spesifik daripada default. Karena alasan inilah versi nol spesifisitas diusulkan.

Isu yang dibahas dalam pertemuan tersebut adalah mengenai penamaan pseudo-class ini, Anda dapat melihat resolusi akhir di sini, dan jika Anda bertanya-tanya mengapa berbagai nama dikesampingkan, lihat utas lengkapnya. Memberi nama sesuatu dalam CSS sangat sulit — karena kita semua harus hidup dengannya selamanya! Setelah banyak perdebatan, grup memilih dan memutuskan untuk memanggil pemilih ini :where() .

Sejak pertemuan tersebut, dan ketika saya sedang menulis posting ini, sebuah saran telah diajukan untuk mengganti nama matches() menjadi is() . Lihatlah masalahnya dan beri komentar jika Anda memiliki perasaan yang kuat!

Singkatan Logis Untuk Margin Dan Padding

Tentang penamaan sesuatu, saya pernah menulis tentang Properti dan Nilai Logis di sini di Majalah Smashing, lihat "Memahami Properti dan Nilai Logika". Properti dan nilai ini menyediakan pemetaan relatif aliran. Ini berarti bahwa jika Anda menggunakan Mode Penulisan selain mode penulisan horizontal atas ke bawah, seperti bahasa Inggris, hal-hal seperti margin dan padding, lebar dan tinggi mengikuti arah teks dan tidak terkait dengan dimensi layar fisik.

Misalnya, untuk margin fisik kami memiliki:

• margin-top
• margin-right
• margin-bottom
• margin-left

Pemetaan logis untuk ini (dengan asumsi horizontal-tb) adalah:

• margin-block-start
• margin-inline-end
• margin-block-end
• margin-inline-start

Kita dapat memiliki dua singkatan nilai. Misalnya, untuk menetapkan margin-block-start dan margin-block-end sebagai singkatan, kita dapat menggunakan margin-block: 20px 1em . Nilai pertama mewakili tepi awal dalam dimensi blok, nilai kedua tepi akhir dalam dimensi blok.

Namun, kami menemukan masalah ketika kami sampai pada margin singkatan empat nilai . Nama properti itu digunakan untuk margin fisik — bagaimana kita menunjukkan versi empat nilai logis? Berbagai hal telah disarankan, termasuk sakelar di bagian atas file:

 @mode "logical";

Atau, untuk menggunakan blok yang terlihat sedikit seperti kueri media:

 @mode (flow-mode: relative) { }

Kemudian berbagai saran untuk pengubah kata kunci, menggunakan beberapa karakter tanda baca, atau membuat nama properti baru:

 margin: relative 1em 2em 3em 4em; margin: 1em 2em 3em 4em !relative; margin-relative: 1em 2em 3em 4em; ~margin: 1em 2em 3em 4em;

Anda dapat membaca edisi untuk melihat berbagai hal yang sedang dipertimbangkan. Masalah yang dibahas adalah bahwa meskipun versi logis mungkin pada umumnya menjadi default, terkadang Anda ingin hal-hal terkait dengan geometri layar; kita harus dapat memiliki kedua opsi dalam satu stylesheet. Memiliki pengaturan @mode di bagian atas CSS dapat membingungkan; itu akan gagal jika seseorang menyalin dan menempelkan sepotong stylesheet.

Preferensi saya adalah memiliki semacam nilai kata kunci. Dengan begitu, jika Anda melihat aturannya, Anda dapat melihat dengan tepat mode mana yang sedang digunakan, meskipun terlihat sedikit tidak elegan. Ini adalah hal yang dapat ditangani oleh praprosesor untuk Anda; jika Anda memang ingin semua properti dan nilai Anda menggunakan versi logis.

Kami tidak berhasil menyelesaikan masalah tersebut, jadi jika Anda memiliki pemikiran tentang yang mana yang terbaik, atau dapat melihat masalah dengannya yang belum kami jelaskan, beri komentar tentang masalah tersebut di GitHub.

Diskusi Tes Platform Web

Pada pertemuan Kelompok Kerja CSS dan kemudian selama Hari Plenary Teknis gaya unconference, saya terlibat dalam membahas bagaimana melibatkan lebih banyak orang dalam menulis tes untuk spesifikasi CSS. Proyek Tes Platform Web bertujuan untuk menyediakan tes untuk semua platform web. Tes ini kemudian membantu vendor browser memeriksa apakah browser mereka benar untuk spesifikasinya. Dalam Pokja CSS, tujuannya adalah agar setiap perubahan normatif terhadap spesifikasi yang telah mencapai status Candidate Recommendation (CR), harus disertai dengan pengujian. Ini masuk akal karena begitu spesifikasi ada di CR, kami meminta browser untuk mengimplementasikan spesifikasi itu dan memberikan umpan balik. Mereka perlu tahu jika ada perubahan spesifikasi sehingga mereka dapat memperbarui kode mereka.

Masalahnya adalah kami memiliki sangat sedikit orang yang menulis spesifikasi, jadi bagi penulis spesifikasi harus menulis semua tes akan memperlambat kemajuan CSS. Kami akan senang melihat orang lain menulis tes, karena ini adalah cara untuk berkontribusi pada platform web dan untuk mendapatkan pengetahuan mendalam tentang cara kerja spesifikasi. Jadi kami bertemu untuk memikirkan bagaimana kami dapat mendorong orang untuk berpartisipasi dalam upaya tersebut. Saya telah menulis tentang hal ini di masa lalu; jika ide menulis tes untuk platform menarik minat Anda, lihat artikel 24 Cara saya tentang "Menguji Platform Web".

Pada Dengan Pekerjaan!

TPAC telah banyak ditambahkan ke daftar tugas pribadi saya. Namun, saya dapat mengambil tip tentang pengeditan spesifikasi, penulisan tes, dan untuk membuat rencana untuk mendapatkan spesifikasi Tata Letak Multi-Kolom — di mana saya adalah editor bersama — kembali ke status CR. Sebagai seseorang yang bukan penggemar rapat, saya datang untuk melihat betapa berharganya pertemuan tatap muka ini untuk platform web, memberi kita yang berkontribusi untuk itu kesempatan untuk berbagi pengetahuan yang kita kembangkan secara individu. Saya merasa penting untuk kemudian mengambil pengetahuan itu dan membagikannya di luar grup untuk membantu lebih banyak orang terlibat dalam pengembangan serta penggunaan platform.

Jika Anda tertarik dengan bagaimana CSS Working Group berfungsi, dan bagaimana CSS baru ditemukan dan berakhir di browser, lihat presentasi CSSConf.eu 2017 saya “Dari Mana CSS Berasal?” dan informasi dari fantasai dalam postingannya “An Inside View of the CSS Working Group at W3C”.