Update pertengahan tahun pada Compat 2021—upaya untuk menghilangkan masalah kompatibilitas browser di lima area fokus utama: CSS flexbox, CSS Grid, posisi: sticky, rasio aspek, dan transformasi CSS.
Saatnya update pertengahan tahun pada Compat 2021—upaya untuk menghilangkan masalah kompatibilitas browser di lima area fokus utama. Untuk mengetahui detail selengkapnya tentang cara kerja #compat2021 dan cara kami menentukan area fokus, lihat pengumuman bulan Maret.
Peningkatan pada Chromium yang dibahas dalam postingan ini akan menjangkau Chrome, Edge, dan semua browser berbasis Chromium.
Cara kami mengukur progres
Anda dapat memeriksa dasbor Compat 2021 untuk mengetahui web-platform-tests guna melihat jumlah pengujian yang lulus dan grafik trending untuk berbagai browser.
Angka "pengujian yang lulus" sederhana tidak memberikan gambaran lengkap tentang kompatibilitas browser, tetapi merupakan salah satu sinyal yang kami gunakan untuk melihat progres upaya kami. Lebih sedikit perbedaan antara browser dalam hasil pengujian berarti interoperabilitas fitur web yang lebih besar di beberapa browser.
Flexbox CSS
Ketiga mesin browser melihat peningkatan pada flexbox.
Safari 14.1 mengirimkan
properti gap untuk flexbox
. Properti gap adalah cara yang mudah untuk menetapkan jarak antar-item. Properti ini sering digunakan
dalam tata letak Petak, dan dukungan dalam tata letak flexbox adalah salah satu fitur yang paling banyak diminta dalam
Laporan Kompatibilitas Browser MN
. Dengan update ini, properti gap di tata letak fleksibel tersedia di semua browser utama dan
tantangan kompatibilitas teratas telah teratasi. Safari 14.1 juga menyertakan banyak perbaikan untuk
gambar di flexbox, sehingga tidak memerlukan solusi lama.
Firefox menyelesaikan rendering tabel sebagai item fleksibel, sehingga Firefox mendekati 100% lulus pengujian (saat ini sebesar 98,5%).
Chromium juga memperbaiki tabel sebagai item fleksibel.
Di Chromium 88, juga terjadi penulisan ulang gambar sebagai item fleksibel,
yang menyelesaikan sejumlah bug yang sudah lama ada. Terakhir, Chromium baru-baru ini menambahkan dukungan untuk kata kunci penyelarasan baru: start, end, self-start, self-end, left, dan right. Kata kunci ini dapat dicoba di
Chrome Canary dan
Edge Canary.
Petak CSS
Penggunaan Petak CSS terus berkembang, saat ini di 9% kunjungan halaman. Ketiga mesin browser utama menerapkan CSS Grid dan sudah lulus lebih dari 89% pengujian platform web terkait. Mengatasi kesenjangan kompatibilitas sangat penting untuk mendukung pertumbuhan yang stabil dari fitur ini.
Sejauh ini pada tahun 2021, Safari telah meningkat dari 89% menjadi 93% dalam pengujian, dan Chromium sedang mengerjakan arsitektur baru untuk menyelesaikan lebih banyak masalah CSS Grid, yang disebut GridNG. Ini adalah upaya yang dipimpin oleh tim Microsoft, dan menghasilkan peningkatan baru-baru ini dari 94% menjadi 97% dalam pengujian Grid yang ditargetkan. Anda akan segera mendapatkan info terbaru terkait GridNG di blog Edge.
CSS position: sticky
Di Chromium, position: sticky untuk header tabel telah diperbaiki dengan diluncurkannya TablesNG, sebuah upaya multi-tahun untuk merancang ulang rendering tabel.
Perubahan ini, bersama dengan beberapa
perbaikan
akhir, telah mendorong saluran developer Chrome dan Edge 93
untuk lulus 100% dari
pengujian yang ditargetkan.
Selain position: sticky,
TablesNG telah menyelesaikan 72 bug Chromium.
Properti aspect-ratio CSS
Properti aspect-ratio, yang memudahkan penetapan rasio lebar tinggi tinggi, sangat penting
untuk desain web yang responsif. Ini juga merupakan solusi untuk mencegah
pergeseran tata letak kumulatif.
Properti aspect-ratio kini didukung di Chrome, Edge, dan Firefox versi stabil, serta
di
Safari 15 beta
. Seiring meningkatnya dukungan lintas browser, penggunaan pun meningkat.
Meskipun tidak ada browser yang memiliki pengujian yang 100%, jarak kompatibilitas untuk aspect-ratio adalah yang terkecil
dari lima area fokus untuk Compat 2021. Ini memiliki lebih dari 90% pengujian yang lulus untuk semua browser utama. Ke depannya, kami akan terus memantau progres menggunakan rangkaian pengujian ini untuk menjadikannya fitur yang
sangat andal.
Pelajari lebih lanjut penggunaan dan manfaat
properti aspect-ratio di web.dev.
Transformasi CSS
Terdapat peningkatan yang lambat dan stabil pada hasil pengujian yang ditargetkan untuk transformasi CSS, karena perbaikan bug dan peningkatan pengujian itu sendiri.
Tim Chromium juga berupaya meningkatkan interoperabilitas transform-style:
preserve-3d dan transform :perspective(). Kami berharap dapat membagikan lebih banyak progres
pada update berikutnya.
Peningkatan skor secara keseluruhan
Sejak pengumuman pada bulan Maret, ketiga mesin browser tersebut telah meningkatkan skor Compat 2021:
- Chrome dan Edge Dev berubah dari 86 menjadi 92.
- Firefox berubah dari 83 ke 86.
- Safari naik dari 64 ke 82.
Secara khusus, Safari telah berhasil menutup kesenjangan kompatibilitas sebesar 18 poin, berkat banyak upaya dari
kontributor WebKit. Secara khusus, tim di
Igalia berkontribusi
terhadap properti aspect-ratio dan banyak peningkatan pada Flexbox dan Grid, seperti gap untuk flexbox
dan berbagai perbaikan bug.
Mengikuti progres Compat 2021
Untuk mengikuti progres Compat 2021, pantau terus dasbor, berlangganan ke milis kami, atau hubungi kami di @chromiumdev. Jika mengalami masalah, pastikan untuk melaporkan bug pada browser yang terpengaruh.