Update Liburan Compat 2021: hadiah untuk developer sebelum akhir tahun

Update akhir tahun untuk Compat 2021—upaya untuk menghilangkan masalah kompatibilitas browser di lima area fokus utama: CSS Flexbox, CSS Grid, posisi: sticky, rasio aspek, dan transformasi CSS.

Philip Jägenstedt

Mariko Kosaka

Akhir tahun ini sudah dekat, dan sekarang waktunya untuk update terakhir pada Compat 2021—upaya untuk menghilangkan masalah kompatibilitas browser di lima area fokus utama.

Catatan: Upaya ini juga dikenal sebagai Interop 2021, yang cocok dengan nama Interop 2022, yang merupakan kelanjutan dari upaya ini.

>90_%

skor di semua browser

Sejak update terakhir, kami terus melihat peningkatan di semua browser. Semua browser dimulai dengan skor ujian yang jauh lebih rendah di awal tahun, tetapi kini semua browser telah melampaui 90%! Artinya, platform web telah meningkatkan interoperabilitas lima area fokus secara signifikan.

Snapshot Dasbor Compat 2021 (browser eksperimental).

Perhatian: Grafik tidak menampilkan peningkatan pada Safari Technology Preview antara Mei dan November dengan benar, karena versi yang diuji macet pada versi yang lebih lama. Error ini kini telah diperbaiki, tetapi data antara bulan Mei dan November tetap salah.

Kontribusi ke mesin browser tidak hanya dilakukan oleh vendor browser, tetapi juga yang lain di komunitas web. Untuk project ini, kami secara khusus ingin berterima kasih kepada Igalia atas keterlibatannya dan terus bekerja untuk meningkatkan skor. Igalia telah berkontribusi untuk meningkatkan kelima area fokus Compat 2021.

Di wpt.fyi, dasbor hasil pengujian, kini terdapat tampilan hasil pengujian terfilter yang menampilkan semua pengujian yang disertakan dalam Compat 2021, serta tampilan untuk Chrome, Firefox, dan Safari yang membandingkan hasil dengan update terakhir kami pada bulan Juli.

Mari kita lihat peningkatan di setiap area.

Catatan: Postingan ini menggunakan nama mesin browser saat merujuk pada peningkatan atau perbaikan bug tertentu. Chromium adalah mesin yang digunakan oleh Chrome dan Edge, Gecko digunakan oleh Firefox, dan WebKit digunakan oleh Safari.

Flexbox CSS

flex-basis: content kini tersedia untuk semua browser, dengan implementasi yang tersedia di Chromium dan WebKit. (Nilai content sudah didukung oleh Gecko.)

Di Chromium, masalah terkait ukuran flexbox telah diperbaiki, sesuai dengan spesifikasi dan perilaku Gecko. Dan di Gecko, beberapa masalah yang memengaruhi Compat 2021 telah diperbaiki, termasuk masalah dengan persentase tinggi pada item yang fleksibel. Terakhir, di WebKit, dukungan untuk lebih banyak nilai properti perataan (kiri, kanan, self-start, self-end, start, end) kini ditambahkan, dan banyak peningkatan dilakukan untuk pemosisian absolut, yang juga meningkatkan hasil pengujian flexbox di Compat 2021.

Petak CSS

Penggunaan Petak CSS di web terus berkembang, seperti yang dapat dilihat di Web Almanac 2021 dan metrik penggunaan Chrome.

Peluncuran GridNG di Chrome dan Edge 93 menyelesaikan banyak masalah lama dengan Grid, menutup 38 masalah yang mengesankan di pelacak bug Chromium. Bersama dengan banyak peningkatan kecil yang mengikutinya, skor Compat 2021 untuk Grid di Chromium meningkat sebesar 3% menjadi 97%. Upaya ini dipimpin oleh tim Edge di Microsoft.

Bug positioning absolut yang memengaruhi Grid telah diperbaiki di Gecko, dan banyak perbaikan yang tersedia di WebKit, yang menghasilkan peningkatan sebesar 1% untuk Firefox dan peningkatan 3% untuk Safari pada pengujian Grid.

CSS position: sticky

Dalam update terakhir, kami mencatat bahwa position: sticky adalah area pertama tempat browser apa pun (dalam hal ini Chrome dan Edge) mencapai 100% lulus pengujian. Sekarang, setelah sejumlah perbaikan dalam implementasi WebKit, Safari juga mendapatkan skor 100% untuk pengujian ini. Sebagian besar peningkatan ini disertakan dalam Safari 15.

Properti aspect-ratio CSS

Dukungan lintas browser untuk menentukan rasio aspek (rasio lebar tinggi) elemen telah terus ditingkatkan, dengan skor Compat 2021 masing-masing mencapai 99%, 97%, dan 95% untuk Chrome/Edge, Firefox, dan Safari. Sebagian besar peningkatan bukan pada properti aspect-ratio itu sendiri, tetapi dengan cara atribut width dan height dipetakan ke nilai aspect-ratio default untuk elemen. Hal ini diimplementasikan untuk beberapa elemen di WebKit, dan <canvas> untuk Chromium.

Transformasi CSS

Dukungan untuk transform: perspective(none) kini didukung di Chromium, Gecko, dan WebKit. Hal ini akan memudahkan untuk dianimasikan antara satu perspektif dan tanpa perspektif.

Di Chromium, transform-style: preserve-3d (yang memungkinkan elemen turunan berpartisipasi dalam scene 3D yang sama) dan properti perspective (yang menerapkan transformasi perspektif ke elemen turunan) kini diselaraskan dengan spesifikasi dengan membuatnya hanya berlaku untuk elemen turunan.

Peningkatan besar pada skor transformasi CSS untuk semua browser terutama disebabkan oleh peningkatan pada rangkaian pengujian, tempat pengujian yang salah telah diperbaiki atau dihapus. Hal ini memudahkan Anda memahami masalah interoperabilitas yang tersisa dan menghindari regresi di masa mendatang.

Kesimpulan

Kami berterima kasih atas upaya semua orang untuk mengakhiri tahun ini dengan menghadirkan banyak peningkatan pada skor serta infrastruktur pengujian yang lebih baik. aspect-ratio adalah fitur yang sudah lama diminta oleh developer web dan sekarang didukung di semua browser. Penggunaan flexbox, petak, dan position: sticky semakin berkembang, dan fitur ini sekarang didukung dengan lebih baik di seluruh browser berkat banyak peningkatan yang dilakukan selama tahun 2021.

Apa langkah selanjutnya? Kami akan terus berkolaborasi dengan vendor browser lainnya dan komunitas yang lebih luas dalam iterasi berikutnya dari upaya ini. Kami telah mulai meneliti dan membahas area fokus untuk tahun 2022. Nantikan pengumuman yang akan segera hadir.

Jika ada masukan atau pertanyaan, hubungi kami di Twitter di @ChromiumDev.