Halaman ini diterjemahkan oleh Cloud Translation API.

Menjembatani kesenjangan

Mempermudah proses membangun untuk web.

Rachel Andrew

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 kita telah memiliki column-gap di 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.

Segera setelah tata letak petak diluncurkan di browser, properti tersebut diganti namanya menjadi gap, bersama dengan row-gap dan column-gap. Kemudian, ditentukan juga 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 kita 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 kali dimulai jauh sebelum fitur tersedia di browser yang 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 itu akan menyebabkan kesenjangan permanen dalam dukungan dan kurangnya penggunaan fitur tersebut.

Namun, dalam hal penerapan fitur, fitur tersebut harus diprioritaskan bersama semua kemungkinan fitur lainnya untuk browser tersebut. Selain itu, terkadang ada hal yang tertunda karena pekerjaan lain yang perlu dilakukan untuk membuat browser menjadi lebih baik. Contoh yang bagus adalah pekerjaan RenderingNG di Chromium. Hal ini telah membuka jalan untuk implementasi subkisi; namun, kesenjangan panjang antara subgrid pengiriman Firefox dan Chromium disebabkan oleh perlunya tata letak petak untuk diterapkan kembali di mesin rendering baru terlebih dahulu.

Permasalahan

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 dalam dukungan pada sejumlah fitur, termasuk properti gap dalam tata letak fleksibel. Tahun ini, upaya Interop 2022 berfokus pada 15 fitur, dan sudah ada gerakan untuk beberapa fitur tersebut.

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 dalam 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 tentang MDN, bersama dengan 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

Jika ingin mengetahui lebih lanjut visi Chrome untuk web, hal-hal yang kami coba di uji coba Origin dan 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.

Ini adalah masa yang sangat menarik bagi 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.