Menjembatani kesenjangan

Mempermudah pengembangan untuk web.

Rachel Andrew

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

Jarak flexbox

Sebagai contoh properti yang bermasalah, properti gap memungkinkan Anda membuat celah di antara item petak atau fleksibel, atau kolom dalam penampung multicol. Meskipun kami telah memiliki column-gap dalam multicol 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 tersedia di browser, properti tersebut diganti namanya menjadi gap, bersama dengan row-gap dan column-gap. Kemudian, ditentukan juga untuk berfungsi dalam tata letak fleksibel. Dengan mengganti nama, kita tidak akan 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 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 daripada versi terbaru. Dukungan gap dalam tata letak fleksibel menjadi lebih bermasalah karena kita tidak dapat menggunakan kueri fitur untuk mendeteksi dukungan jarak dalam tata letak fleksibel. Karena properti gap didukung dalam petak, @supports (gap:1em) akan menampilkan nilai benar (true).

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

Mengapa ada kesenjangan dalam dukungan?

Ini bukan postingan yang menyalahkan satu browser karena lambat. Jika melihat berbagai fitur platform, Anda akan menemukan bahwa browser yang berbeda memimpin 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 telah melakukan banyak pekerjaan untuk mengetahui cara kerja subgrid, sehingga fitur ini pertama kali hadir di Firefox. Kita melihat Safari memimpin dalam beberapa fungsi warna baru yang menarik.

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

Namun, saat menerapkan fitur, fitur tersebut harus diprioritaskan bersama semua kemungkinan fitur lainnya untuk browser tersebut. Terkadang, hal-hal tersebut 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 subgrid; namun, jeda yang panjang antara Firefox dan Chromium dalam menerapkan subgrid disebabkan oleh kebutuhan tata letak petak untuk diimplementasikan ulang terlebih dahulu di mesin rendering baru.

Masalahnya

Kita memiliki dua masalah di sini. Yang pertama adalah masalah interoperabilitas, yaitu fakta bahwa dibutuhkan waktu yang lama sejak fitur tersedia di satu browser hingga tersedia di mana-mana.

Yang kedua adalah masalah pengiriman pesan. Bagaimana cara memperjelas di mana kesenjangan dalam dukungan berada? Bagaimana cara kami membagikan fitur baru tanpa membuat semua orang harus meneliti setiap hal dengan cermat untuk mengetahui seberapa baik dukungan yang diberikan?

Interoperabilitas

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

Anda dapat mengikuti progresnya di dasbor Interop 2022.

Messaging

Masalah kedua adalah sesuatu yang ingin saya bantu selesaikan 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 akan ada lebih banyak kursus lainnya. Kursus ini membantu Anda mempelajari cara membangun web modern menggunakan teknologi platform web inti. Check out:

Kami berupaya memfokuskan konten di situs ini pada hal-hal yang dapat Anda gunakan dengan aman. Kami belum sepenuhnya sampai di sana; namun, 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 kita memiliki dokumentasi kelas satu di MDN, beserta data kompatibilitas browser yang terbaru. Kemudian, kami menggunakan data ini di web.dev untuk menunjukkan dukungan terhadap fitur. Berikut dukungan gap saat ini dalam tata letak fleksibel.

Browser Support

Jika Anda ingin mengetahui lebih lanjut visi Chrome untuk web, hal-hal yang kami coba dalam uji Coba Origin dan Developer, Anda akan semakin sering menemukan konten tersebut di situs partner kami—developer.chrome.com. Konten di sana mungkin masih dalam tahap 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 menghadirkan fitur utama kepada Anda dengan lebih cepat, dan memperjelas kesenjangan yang ada, sehingga membuat pengembangan web lebih menyenangkan dan tidak membuat frustrasi.

Foto oleh Cristofer Maximilian.