Untuk pertama kalinya, semua vendor browser utama, dan pemangku kepentingan lainnya, telah bersama-sama mengatasi masalah kompatibilitas browser teratas yang diidentifikasi oleh pengembang web. Interop 2022 akan meningkatkan pengalaman pengembangan web di 15 area utama. Dalam artikel ini, cari tahu bagaimana kita sampai di sini, apa yang menjadi fokus proyek, bagaimana keberhasilan akan diukur, dan bagaimana Anda dapat melacak kemajuan.
Semuanya dimulai pada tahun 2019
Pada tahun 2019, Mozilla, Google, dan lainnya memulai upaya besar untuk memahami permasalahan developer, dalam bentuk survei Penilaian Kebutuhan Developer MNN, serta Laporan Kompatibilitas Browser yang mendalam. Laporan ini memberi kami informasi yang mendetail dan dapat ditindaklanjuti untuk mengatasi tantangan utama bagi developer dengan platform web, dan membuahkan upaya Compat 2021.
Di antara berbagai hal lainnya, Compat 2021 menciptakan fondasi yang kuat untuk fitur-fitur canggih seperti petak CSS (penggunaan 12% dan terus berkembang) serta flexbox CSS (77% penggunaan), termasuk properti gap di flexbox, yang mengatasi masalah utama bagi developer saat mengadopsi metode tata letak baru.
Kami sangat senang dapat mencapai skor lebih dari 90% di semua penerapan pada akhir tahun 2021.
Apa itu Interop 2022?
Interop 2022 adalah tolok ukur, yang disepakati oleh perwakilan dari tiga penerapan browser utama, dan dikembangkan melalui proses nominasi publik dan peninjauan dengan masukan dari pendukung Apple, Bocoup, Google, Igalia, Microsoft, dan Mozilla.
Tolok ukur ini berfokus pada 15 area, yang diidentifikasi oleh developer sebagai area yang sangat merepotkan saat mereka tidak ada atau mengalami masalah kompatibilitas di seluruh browser. Semua vendor browser telah setuju untuk fokus pada area ini, dan semua orang yang terlibat sangat bersemangat untuk mulai membuat pengalaman pengembangan web menjadi lebih baik.
15 area fokus
Fitur berikut akan menjadi fokus Interop 2022. Mereka mencakup 10 area baru, plus 5 area yang ditangani dari Compat 2021. Area fokus baru adalah:
Lapisan bertingkat
Lapisan Cascade memberi developer web kontrol yang lebih besar atas cascade. Alat tersebut menyediakan cara untuk mengelompokkan pemilih ke dalam beberapa lapisan, masing-masing dengan kekhususannya. Artinya, Anda tidak perlu mengurutkan pemilih dengan hati-hati atau membuat pemilih yang sangat spesifik untuk menimpa aturan dasar CSS.
Ruang warna dan fungsi warna CSS
Untuk menggunakan fungsi warna dalam sistem desain, saat ini Anda harus mengandalkan Sass, PostCSS, atau calc() pada nilai HSL. Fungsi warna yang terintegrasi ke dalam CSS memungkinkan warna diperbarui secara dinamis, dan ruang warna baru menghilangkan batasan terhadap gamut sRGB dan batasan persepsi HSL.
Ada dua fungsi yang ditentukan di CSS Color Level 5 yang memungkinkan penerapan tema yang lebih dinamis di platform web:
color-mix(): Mengambil dua warna dan menampilkan hasil pencampurannya dalam ruang warna tertentu dengan jumlah yang ditentukan.color-contrast(): Memilih warna dari daftar warna dengan kontras tertinggi terhadap satu warna yang ditentukan.
Fungsi ini mendukung ruang warna yang diperluas (LAB, LCH, dan P3), dan selain HSL dan sRGB, fungsi tersebut juga menggunakan ruang warna LCH seragam secara default.
Unit area pandang baru
Kesulitan terkait ukuran area pandang terlihat jelas dalam Laporan Kompatibilitas Browser MDN 2020 dan survei State of CSS 2021 yang baru. Nilai CSS dan Unit Level 4 menambahkan unit baru untuk ukuran area pandang terbesar, terkecil, dan dinamis, lv*, sv*, dan dv*. Unit ini akan mempermudah pembuatan tata letak yang mengisi area pandang yang terlihat di perangkat seluler dengan mempertimbangkan kolom URL.
Selain itu, tim lintas vendor di balik Interop 2022 akan berkolaborasi dalam meneliti dan meningkatkan status interoperabilitas fitur pengukuran area pandang yang ada, termasuk unit vh yang ada.
Scroll
Laporan Survei Scroll 2021 mengonfirmasi bahwa fitur scroll dan kompatibilitas scroll sulit diterapkan dan memiliki banyak area yang perlu ditingkatkan. Kita akan berfokus pada snap scroll, perilaku scroll, dan perilaku overscroll untuk membantu proses scroll lebih konsisten dan lancar di seluruh platform.
Kami juga sedang mempelajari proposal fitur scroll snap baru.
Subgrid
Nilai subgrid dari grid-template-columns dan grid-template-rows berarti bahwa item petak yang menerapkan display: grid dapat mewarisi definisi jalur dari bagian petak induk tempat item tersebut ditempatkan.
Misalnya, tiga komponen kartu berikut memiliki header dan footer yang sejajar dengan header dan footer kartu yang berdekatan, meskipun setiap kartu memiliki petak independen. Pola ini berfungsi karena setiap kartu merupakan item yang mencakup tiga baris petak induk, lalu menggunakan subgrid untuk mewarisi baris tersebut ke dalam kartu.
Juga disertakan
- Pembatasan CSS (properti
contain) - Elemen
<dialog> - Kontrol formulir
- Tipografi dan Encoding: mencakup
font-variant-alternates,font-variant-position, unitic, dan encoding teks CJK - Web Compat, yang berfokus pada perbedaan antar-browser yang telah menyebabkan masalah kompatibilitas situs yang memengaruhi pengguna akhir
Area berikut membuat kemajuan besar melalui project Compat 2021, tetapi masih ada ruang untuk peningkatan. Oleh karena itu, masalah tersebut telah disertakan dalam Interop 2022 agar masalah lainnya dapat ditangani.
- Rasio Aspek
- Kotak Flex
- Kisi
- Positioning Melekat
- Transformasi
Upaya investigasi
Selain 15 area fokus, Interop 2022 mencakup tiga upaya investigasi. Ini adalah area yang bermasalah dan perlu ditingkatkan, tetapi di mana status spesifikasi atau pengujian saat ini belum cukup baik untuk dapat menilai progres menggunakan hasil pengujian:
- Mengedit,
contenteditable, danexecCommand - Peristiwa Pointer dan Mouse
- Pengukuran Area Pandang
Vendor browser dan pemangku kepentingan lainnya akan berkolaborasi dalam meningkatkan pengujian dan spesifikasi untuk area ini, sehingga dapat disertakan dalam pengulangan upaya ini di masa mendatang.
Mengukur keberhasilan dan melacak kemajuan
Dasbor pengujian platform web yang sudah ada akan digunakan untuk melacak progres di 15 area fokus. Untuk setiap area, serangkaian pengujian telah diidentifikasi. Selanjutnya, browser akan diberi skor terhadap pengujian ini, yang memberikan skor untuk setiap area dan skor keseluruhan untuk 15 area tersebut.
Untuk mengikuti dan memantau progres, lihat dasbor Interop 2022. Sepanjang tahun ini, Anda dapat mengikuti dan melihat peningkatan platform yang Anda bangun.
Apa arti semua ini bagi developer?
Tujuan dari upaya interoperabilitas multi-tahun ini, dalam bentuk Compat 2021, Interop 2022, dan banyak lagi, adalah untuk sepenuhnya memahami dan mengatasi titik masalah yang telah dialami developer selama bertahun-tahun. Dan ini bukanlah upaya satu browser, melainkan kolaborasi kuat antara semua vendor browser utama dan teman untuk meningkatkan platform web secara keseluruhan.
Pada intinya, tujuannya adalah untuk membuat platform web lebih bermanfaat dan andal bagi developer, sehingga mereka dapat menghabiskan lebih banyak waktu untuk membangun pengalaman web yang luar biasa daripada mengatasi inkonsistensi browser.
Beri tahu kami pendapat Anda
Jika Anda memiliki masukan terkait peningkatan yang dilakukan selama Compat 2021, atau terkait fitur apa pun yang disertakan dalam Interop 2022, kami ingin mendengar pendapat Anda. Manakah dari fitur berikut yang paling berguna untuk pekerjaan Anda? Apa yang membuat Anda sangat bersemangat? Laporkan masalah untuk repo GitHub atau beri tahu kami di Twitter.
Selengkapnya tentang Interop 2022 dari: