Menjembatani kesenjangan

Mempermudah pembuatan untuk web.

Saat berbicara dengan developer, baik secara individual maupun melalui survei seperti Status CSS, kami berulang kali mendengar hal yang sama. Developer kesulitan membuat situs dan aplikasi yang berfungsi dengan baik di seluruh browser, dan kesulitan mengetahui kapan fitur baru yang menarik aman digunakan.

Jeda flexbox

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

Segera setelah tata letak petak diluncurkan di browser, properti tersebut diganti namanya menjadi gap, bersama dengan row-gap dan column-gap. Kemudian, ini juga ditentukan untuk berfungsi dalam tata letak fleksibel. Penggantian nama berarti kita tidak memiliki beberapa properti yang melakukan hal yang sama.

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

Firefox mengirimkan properti untuk tata letak fleksibel pada Oktober 2018. Fitur ini tidak muncul di Chrome hingga Juli 2020, diikuti dengan Safari pada April 2021. Artinya, ada jeda dua tahun enam bulan sebelum kami dapat menggunakan gap dengan aman. Pada kenyataannya, bagi sebagian besar developer, waktu tunggunya jauh lebih lama, karena perlu mendukung versi browser yang lebih lama dari versi terbaru. Mendukung gap dalam tata letak fleksibel menjadi lebih bermasalah karena kita tidak dapat menggunakan kueri fitur untuk mendeteksi dukungan celah dalam tata letak fleksibel. Karena properti gap didukung dalam petak, @supports (gap:1em) akan menampilkan true.

Masalah tambahannya adalah saat fitur baru muncul di satu browser, orang-orang mulai membicarakannya dan membagikan demo. Proses ini sering dimulai jauh sebelum fitur tersebut tersedia di browser stabil. Hal ini dapat membingungkan developer, atau setidaknya, membuat frustrasi. Berkali-kali, fitur baru yang menarik dibicarakan di mana-mana, lalu Anda mendapati bahwa Anda tidak dapat menggunakannya karena kurangnya dukungan.

Mengapa ada kesenjangan dalam dukungan?

Postingan ini bukan untuk menyalahkan satu browser karena lambat. Jika melihat berbagai fitur platform, Anda akan menemukan bahwa browser yang berbeda memiliki keunggulan pada fitur yang berbeda.

Sebagian besar fitur akan dibuat prototipenya di satu browser. Misalnya, spesifikasi tata letak petak pertama kali dibuat oleh Microsoft dan diterapkan dalam bentuk awal di Internet Explorer 10. Seorang engineer di Mozilla melakukan banyak pekerjaan untuk mengetahui perilaku sub-petak, sehingga fitur ini diluncurkan di Firefox terlebih dahulu. Kami melihat Safari mengambil peran utama dalam beberapa fungsi warna baru yang menarik.

Meskipun satu browser mungkin memimpin pembuatan prototipe, perwakilan dari semua browser (dan organisasi lainnya) di Kelompok Kerja CSS akan membahas fitur CSS. Sangat penting bahwa fitur dapat diterapkan di semua browser, dan tidak dirancang sedemikian rupa sehingga tidak dapat diterapkan di satu browser. Hal ini akan menyebabkan kesenjangan dukungan yang permanen, dan kurangnya adopsi fitur.

Namun, dalam hal penerapan fitur, fitur tersebut harus diprioritaskan bersama semua kemungkinan fitur lainnya untuk browser tersebut. Selain itu, terkadang ada hal-hal yang tertunda karena pekerjaan lain yang perlu dilakukan untuk membuat browser menjadi lebih baik. Contoh yang bagus untuk hal ini adalah pekerjaan RenderingNG di Chromium. Hal ini telah membuka jalan bagi penerapan sub-petak; namun, jeda yang lama antara sub-petak pengiriman Firefox dan Chromium disebabkan oleh kebutuhan untuk menerapkan ulang tata letak petak di mesin rendering baru terlebih dahulu.

Masalah

Kita memiliki dua masalah di sini. Pertama adalah masalah interoperabilitas, yaitu fakta bahwa perlu waktu lama sejak fitur diluncurkan di satu browser hingga tersedia di mana saja.

Yang kedua adalah masalah pesan. Bagaimana cara kita menjelaskan kekurangan dukungan? Bagaimana cara kami membagikan fitur baru tanpa membuat semua orang harus meneliti setiap hal dengan cermat untuk mengetahui seberapa baik fitur tersebut didukung?

Interoperabilitas

Browser sudah bekerja sama untuk menyelesaikan masalah interoperabilitas. Tahun lalu, Compat 2021 membantu menutup kesenjangan dukungan pada sejumlah fitur, termasuk properti celah dalam tata letak fleksibel. Tahun ini, upaya Interop 2022 berfokus pada 15 fitur, dan beberapa fitur tersebut telah mengalami perubahan.

Anda dapat mengikuti progres di dasbor Interop 2022.

Messaging

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

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

Kami berupaya memfokuskan konten kami di situs ini pada hal-hal yang dapat Anda gunakan dengan aman. Kami belum sepenuhnya mencapainya; namun, Anda akan mulai melihat sedikit perubahan menuju praktik selama beberapa bulan mendatang.

Kami juga berkontribusi pada dokumentasi web terbuka melalui dukungan kami terhadap project Open Web Docs. Hal ini memastikan kami memiliki dokumentasi kelas satu di MDN, beserta data kompatibilitas browser terbaru. Kemudian, kami menggunakan data ini di web.dev untuk menampilkan dukungan untuk fitur. Berikut adalah dukungan gap saat ini dalam tata letak fleksibel.

Dukungan Browser

  • Chrome: 84.
  • Edge: 84.
  • Firefox: 63.
  • Safari: 14.1.

Jika ingin mengetahui lebih lanjut visi Chrome untuk web, hal-hal yang kami coba di Origin dan uji coba Developer, Anda akan semakin sering menemukan konten tersebut di situs kami yang lain—developer.chrome.com. Konten di sana mungkin bersifat eksperimental, atau hanya didukung di Chrome saat ini, tetapi kami ingin Anda menjelajahi dan memberikan masukan.

Saat ini adalah waktu yang sangat menarik untuk web. Kami harap kami dapat membantu menghadirkan fitur utama kepada Anda dengan lebih cepat, dan menjelaskan kesenjangan yang ada, sehingga pengembangan web menjadi lebih menyenangkan dan tidak terlalu menjengkelkan.

Foto oleh Cristofer Maximilian.