Menjembatani kesenjangan

Mempermudah pembuatan untuk web.

Rachel Andrew

Ketika kami berbicara dengan developer, baik itu satu per satu atau melalui survei seperti Status CSS, kami berulang kali mendengar hal yang sama. Developer mengalami kesulitan dalam membuat situs dan aplikasi yang berfungsi dengan baik di seluruh browser, dan merasa sulit untuk mengetahui kapan fitur baru yang menarik aman digunakan.

Gap Flexbox

Sebagai contoh properti yang bermasalah, properti gap memungkinkan Anda membuat celah antara item petak atau fleksibel, atau kolom dalam penampung multicol. Meskipun kita telah memiliki column-gap dalam multicol untuk waktu yang lama, properti ini pertama kali muncul dalam tata letak petak sebagai grid-gap, bersama dengan grid-column-gap dan grid-row-gap.

Tepat setelah tata letak petak berada di browser, properti ini diganti namanya menjadi gap, bersama dengan row-gap dan column-gap. Kemudian, elemen ini ditetapkan agar berfungsi dalam tata letak fleksibel juga. Penggantian nama berarti bahwa tidak ada beberapa properti yang melakukan hal yang sama.

.box {
  display: flex;
  gap: 1em;
}

Firefox meluncurkan properti ini untuk tata letak fleksibel pada Oktober 2018. Versi ini tidak muncul di Chrome hingga Juli 2020, diikuti oleh Safari pada April 2021. Ini berarti ada jeda dua tahun enam bulan sebelum kami dapat menggunakan gap dengan aman. Pada kenyataannya, sebagian besar developer harus menunggu lebih lama karena mereka harus mendukung versi browser yang lebih lama dari versi terbaru. Mendukung gap dalam tata letak fleksibel semakin bermasalah karena kita tidak dapat menggunakan kueri fitur untuk mendeteksi dukungan kesenjangan dalam tata letak fleksibel. Karena properti gap didukung dalam petak, @supports (gap:1em) akan menampilkan benar (true).

Masalah lainnya adalah saat fitur baru ada di satu browser, orang mulai membicarakannya dan berbagi demo. Hal ini sering dimulai jauh sebelum fitur tersebut berada dalam browser stabil apa pun. Hal ini bisa membingungkan developer, atau setidaknya, menjengkelkan. Berulang kali, fitur-fitur baru yang hebat sedang dibicarakan di mana-mana, dan kemudian Anda mendapati bahwa Anda tidak dapat benar-benar menggunakannya karena kurangnya dukungan.

Mengapa ada kesenjangan dukungan?

Ini bukan postingan yang menunjukkan jari pada satu browser karena lambat. Jika Anda melihat ke berbagai fitur platform yang berbeda, Anda akan menemukan bahwa {i>browser<i} yang berbeda memimpin pada fitur yang berbeda.

Sebagian besar fitur akan dibuat prototipenya dalam satu browser. Misalnya, spesifikasi tata letak {i>grid<i} pertama kali dibuat oleh Microsoft dan diimplementasikan dalam bentuk awal di Internet Explorer 10. Seorang insinyur di Mozilla melakukan banyak pekerjaan untuk mencari tahu bagaimana seharusnya {i>subgrid<i} berperilaku, dan fitur ini mendarat di Firefox terlebih dahulu. Kami melihat Safari memimpin beberapa fungsi warna baru yang menarik.

Meskipun satu browser dapat memimpin pembuatan prototipe, perwakilan semua browser (dan organisasi lain) di Kelompok Kerja CSS mendiskusikan fitur CSS. Sangat penting bahwa fitur dapat diterapkan di semua browser, dan tidak dirancang sedemikian rupa sehingga tidak mungkin diterapkan dalam satu browser. Hal itu akan mengarah pada kesenjangan dukungan yang bersifat permanen, dan kurangnya penggunaan fitur tersebut.

Namun, ketika menerapkan fitur, hal itu perlu diprioritaskan bersama semua fitur lain yang mungkin untuk browser tersebut. Dan, terkadang ada hal-hal yang terhambat di belakang pekerjaan lain yang perlu dilakukan untuk menjadikan browser lebih baik. Contoh yang bagus dari hal ini adalah pekerjaan RenderingNG di Chromium. Hal ini telah membuka jalan bagi penerapan subgrid; namun, kesenjangan panjang antara subgrid pengiriman Firefox dan Chromium adalah karena kebutuhan tata letak petak untuk diterapkan kembali dalam mesin rendering baru terlebih dahulu.

Permasalahan

Ada dua masalah di sini. Yang pertama adalah masalah interoperabilitas, yaitu memerlukan waktu yang lama dari fitur untuk masuk ke satu browser hingga tersedia di mana saja.

Yang kedua adalah masalah pesan. Bagaimana cara memperjelas kesenjangan dalam dukungan yang ada? Bagaimana cara kami membagikan fitur baru tanpa membuat semua orang harus meneliti setiap fitur dengan cermat untuk mengetahui seberapa baik dukungannya?

Interoperabilitas

Browser telah bekerja sama untuk mengatasi masalah interoperabilitas. Tahun lalu, Compat 2021 membantu mengurangi kesenjangan dukungan pada sejumlah fitur, termasuk properti gap dalam tata letak fleksibel. Tahun ini, upaya Interop 2022 berfokus pada 15 fitur, dan sudah ada gerakan pada beberapa fitur tersebut.

Anda dapat mengikuti progresnya di dasbor Interop 2022.

Pesan

Masalah kedua adalah hal yang ingin saya bantu ketika kita membahas fitur di web.dev dan di developer.chrome.com. Saya ingin status fitur benar-benar jelas saat Anda membaca konten, dan agar kami dapat memberikan cara praktis untuk menangani masalah dukungan.

Kami telah meluncurkan sejumlah kursus dasar, dan masih banyak lagi yang akan datang. Kursus ini membantu Anda mempelajari cara membuat web modern, menggunakan teknologi platform web inti. Check out:

• Pelajari CSS
• Pelajari Formulir
• Belajar Desain
• Pelajari PWA

Kami sedang berupaya memfokuskan konten kami di situs ini pada hal-hal yang dapat Anda gunakan dengan aman. Kita belum sepenuhnya sampai di sana; namun, Anda akan mulai melihat sedikit pergeseran terhadap praktik dalam beberapa bulan mendatang.

Kami juga berkontribusi pada membuka dokumentasi web melalui dukungan kami untuk proyek Dokumen Web Terbuka. Hal ini memastikan kami memiliki dokumentasi terbaik tentang MDN, bersama dengan data kompatibilitas browser terbaru. Kemudian, kami menggunakan data ini di web.dev untuk menunjukkan dukungan bagi fitur. Berikut dukungan gap saat ini dalam tata letak fleksibel.

Jika Anda ingin mengetahui lebih banyak tentang visi Chrome untuk web, berbagai hal yang kami uji dalam uji coba Asal dan Developer, Anda akan semakin menemukan konten tersebut di situs sejenis kami—developer.chrome.com. Konten yang ada mungkin masih bersifat eksperimental, atau saat ini hanya didukung di Chrome, tetapi kami ingin Anda mempelajarinya dan memberikan masukan.

Ini benar-benar merupakan masa yang menggembirakan bagi web saat ini. Kami harap kami dapat membantu menghadirkan fitur-fitur utama kepada Anda dengan lebih cepat, dan memperjelas kesenjangan yang ada, sehingga membuat pengembangan web menjadi lebih menyenangkan dan tidak terlalu menyulitkan.

Foto oleh Cristofer Maximilian.