Pada akhir tahun lalu Interop 2023 telah berakhir. Upaya dari vendor browser dan pihak lain ini bertujuan untuk menciptakan web yang lebih memiliki interoperabilitas, dengan lebih sedikit perbedaan antar-browser yang akan membuat Anda kewalahan. Postingan ini menyampaikan hasil akhir, dan juga beberapa fitur favorit tim Chrome.
Skor akhir
Kami sangat senang melihat warna hijau yang begitu banyak, bandingkan dengan skor pada awal tahun 2023, dan kita telah melalui perjalanan yang panjang ini, dengan setiap browser mengalami peningkatan skor yang besar.
Apa yang membuat kita bersemangat?
Temukan daftar lengkap area fokus untuk tahun 2023 di Dasbor Interop 2023. Beberapa area fokus—seperti :has(), kueri penampung, dan atribut inert, mencakup seluruh fitur. Lainnya,
misalnya pekerjaan di Flexbox, menangani beberapa kegagalan uji yang halus dalam
fitur lintas browser yang sudah ada.
:has()
"Terakhir, pemilih induk untuk CSS. Hal ini telah diminta hampir sejak hari pertama, dan akhirnya memilikinya di semua browser sangat bagus dan berarti developer perlu menjalankan lebih sedikit JavaScript untuk meniru pemilih ini."—Thomas Steiner, Developer Relations Engineer di Chrome.
Ada antusiasme yang besar tentang :has() class pseudo
fungsional, karena menghadirkan permintaan kunci dari developer ke platform. Tindakan ini
memberi Anda pemilih induk, sehingga Anda dapat memilih elemen berdasarkan hal-hal yang
ada di dalamnya. Namun, ini dapat digunakan untuk lebih banyak hal. Seperti yang dijelaskan dalam gabungan CSS, Anda dapat memilih
lebih banyak daripada elemen induk, dan bahkan melakukan pemilihan miring.
:has(): DokUna Kravets, Developer Relations Engineer di tim Chrome menjelaskan:
"Pemilih :has() adalah salah satu fitur CSS baru yang paling fleksibel dan canggih. Dengannya, Anda dapat menata gaya induk apa pun berdasarkan kehadiran, status, atau jumlah elemen turunan. Selain itu, Anda dapat menggabungkannya dengan combinator lain untuk menata gaya tampilan saudara dan benar-benar mendapatkan kontrol gaya level baru atas UI Anda. Ini adalah fitur yang sangat fleksibel. Saya sudah melihat banyak demo keren yang mengurangi kebutuhan untuk mengandalkan pembuatan skrip tambahan saat memanfaatkan kemampuan :has()."
Seperti yang diingatkan oleh Philip Jägenstedt, software engineer di Chrome, :has() adalah
fitur utama yang sulit dipahami developer karena kurangnya dukungan saat ditanya
dalam survei Status CSS pada tahun 2023.
Jadi bukan kami satu-satunya yang
senang dengan fitur ini.
Anda dapat mendengarkan Una, bersama Adam Argyle, membahas has() di Podcast CSS, lalu mempelajari
:has() lebih lanjut dari postingan tersebut di komunitas web ini.
- Pelajari pemilih
:has()CSS melalui contoh - Mengunci scroll dengan
:has() - Kasus penggunaan untuk CSS
:has()
Kueri penampung
2023 ternyata menjadi tahun luar biasa untuk berbagai hal yang dulu dianggap mustahil. Selain :has(), platform web akhirnya mendapatkan dukungan lintas browser untuk kueri penampung. Anda telah meminta kueri container (atau elemen) sejak
2011, hanya setahun setelah konsep desain responsif diperkenalkan. Kini,
aplikasi ini telah tersedia, dan tersedia di semua mesin browser utama.
Una dan Adam membahas kueri penampung di Podcast CSS, dan Una memperkenalkannya dalam episode Mendesain di Browser. Komunitas ini juga telah berbagi banyak tips dan ide.
Subgrid
Subgrid adalah penyertaan favorit saya dalam Interop 2023. Hal ini memungkinkan Anda menentukan petak pada elemen induk, lalu menggunakan ukuran jalur yang ditentukan pada induk tersebut, pada petak yang disusun bertingkat di dalam petak utama tersebut. Berkat kerja keras para engineer platform web Microsoft Edge, subgrid tersedia di semua mesin browser utama selama tahun 2023, untuk meningkatkan skor Chrome, dan menghadirkan fitur menarik ini bagi semua orang.
Insinyur Hubungan Developer Chrome, Adriana Jara mengatakan bahwa {i>grid<i} dan subgrid membuat pembuatan UI yang hebat menjadi lebih mudah,
"Saya buruk dalam hal visual, tata letak, menjaga tampilan yang konsisten, dan beradaptasi dengan layar. Tetapi dengan {i>grid<i} dan subgrid, pembuatan desain yang berfungsi di berbagai ukuran layar dan beradaptasi secara otomatis dengan konten dapat dilakukan. Ini adalah favorit saya karena mengatasi kebutuhan dasar untuk membuat situs yang memberi pengguna pengalaman yang layak tanpa banyak keahlian."
Saya menulis beberapa kasus penggunaan subgrid dalam artikel tentang 12 Days of Web dan seperti fitur lain dalam postingan ini, Anda dapat mendengarkan episode podcast CSS selengkapnya. Referensi dari seluruh web juga banyak tersedia.
- Pelajari subgrid CSS
- Video: Tata letak yang mudah dan lebih konsisten dengan subgrid
- Menata tata letak konten dengan petak dan subgrid CSS
Ruang warna dan fungsi
Tidaklah mengherankan jika developer CSS Chrome Adam Argyle memberi tahu saya bahwa ruang warna dan fungsi adalah fitur favoritnya,
"Selamat tinggal matematika variabel nilai saluran HSL yang canggung; Halo satu baris varian warna tepat waktu. Ruang dan fungsi warna baru juga tidak hanya menyelesaikan masalah alur kerja warna, tetapi juga menghadirkan akses ke warna dan gradien yang lebih canggih, andal, dan cerah. Yang tidak disukai, ketika Anda membuka beberapa kemampuan sekaligus membuat hidup Anda lebih mudah. Taburkan bumbu buatan Interop tersebut, dan hidangan ini benar-benar menyenangkan."
Adam telah membuat beberapa konten luar biasa untuk membantu Anda memahami fitur-fitur baru ini, seperti Panduan Warna CSS Definisi Tinggi dan gradient.style, serta membahas fungsi warna di Podcast CSS.
Sangat menyenangkan memiliki fitur ini tersedia di semua mesin browser utama. Cari tahu lebih lanjut di artikel-artikel hebat ini.
Kami menantikan Interop 2024
Setelah dapat dioperasikan, fitur akan menjadi bagian dari Dasar Pengukuran—baru tersedia. Sangat menarik melihat jumlah fitur baru yang masuk ke grup ini selama tahun 2023, sebagian besar dikarenakan kerja keras semua orang yang terlibat dalam Interop 2023. Tak lama lagi untuk mengumumkan area fokus yang dipilih untuk tahun 2024, dan kita semua tidak sabar untuk melihat platform web yang semakin baik tahun ini.