Menjembatani kesenjangan

Mempermudah pembuatan aplikasi untuk web.

Rachel Andrew

Saat kami berbicara dengan developer, baik secara individu maupun melalui survei seperti State of CSS, kami berulang kali mendengar hal yang sama. Developer merasa sulit membuat situs dan aplikasi yang berfungsi dengan baik di berbagai browser, dan merasa sulit mengetahui kapan fitur baru yang menarik aman untuk digunakan.

Celah flexbox

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

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

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

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

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

Mengapa ada kesenjangan dalam dukungan?

Postingan ini tidak bermaksud menyalahkan satu browser karena lambat. Jika Anda melihat berbagai fitur platform, Anda akan menemukan bahwa browser yang berbeda memiliki keunggulan dalam 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 mencari tahu bagaimana subgrid seharusnya berperilaku, sehingga fitur ini pertama kali hadir di Firefox. Kami melihat Safari memimpin dalam beberapa fungsi warna baru yang menarik.

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

Namun, saat menerapkan fitur, fitur tersebut harus diprioritaskan bersama semua fitur lain yang mungkin ada untuk browser tersebut. Selain itu, terkadang hal-hal tersebut tertunda karena pekerjaan lain yang perlu dilakukan untuk meningkatkan kualitas browser. Contoh yang bagus adalah pekerjaan RenderingNG di Chromium. Hal ini telah membuka jalan bagi penerapan subgrid; namun, jeda yang lama antara Firefox dan Chromium dalam menerapkan subgrid disebabkan oleh perlunya tata letak petak diterapkan kembali di mesin rendering baru terlebih dahulu.

Masalah

Ada dua masalah di sini. Pertama adalah masalah interoperabilitas, yaitu fakta bahwa perlu waktu lama sejak fitur diluncurkan di satu browser hingga tersedia di semua browser.

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

Interoperabilitas

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

Anda dapat mengikuti progresnya di dasbor Interop 2022.

Pesan

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

Kami telah meluncurkan sejumlah kursus dasar, dan akan ada lebih banyak lagi. Kursus ini membantu Anda mempelajari cara membangun 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 mencapai tujuan tersebut, tetapi Anda akan mulai melihat sedikit perubahan ke arah yang lebih praktis 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 di MDN, beserta data kompatibilitas browser terbaru. Kemudian, kami menggunakan data ini di sini di web.dev untuk menunjukkan dukungan terhadap fitur. Berikut dukungan gap saat ini dalam tata letak fleksibel.

Browser Support

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

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

Saat ini adalah waktu yang sangat menarik bagi web. Kami berharap dapat membantu menghadirkan fitur-fitur utama kepada Anda dengan lebih cepat, dan memperjelas kesenjangan yang ada, sehingga pengembangan web menjadi lebih menyenangkan dan tidak membuat frustrasi.