Compat 2021: Menghilangkan lima titik masalah kompatibilitas teratas di web

Google bekerja sama dengan vendor browser dan partner industri lain untuk memperbaiki lima titik masalah kompatibilitas browser teratas bagi developer web: flexbox CSS, CSS Grid, position: sticky, aspect-ratio, dan transformasi CSS.

Philip Jägenstedt
Robert Nyman

Google bekerja sama dengan vendor browser dan partner industri lainnya untuk memperbaiki masalah lima titik masalah kompatibilitas browser untuk pengembang web. Area fokus adalah flexbox CSS, Petak CSS, position: sticky, aspect-ratio, dan CSS transform. Lihat Cara berkontribusi dan mengikuti belajar bagaimana untuk terlibat.

Latar belakang

Kompatibilitas di web selalu menjadi tantangan besar bagi pengembang. Di kolom beberapa tahun terakhir, Google dan mitra lainnya, termasuk Mozilla dan Microsoft, telah mulai mempelajari lebih lanjut tentang poin-poin kendala utama untuk web developer, untuk mendorong upaya dan prioritas kami guna memperbaiki situasi. Project ini terhubung ke Developer Google Puas (DevSAT) berhasil, dan itu memulai dalam skala yang lebih besar dengan membuat Survei MDN DNA (Penilaian Kebutuhan Developer) pada tahun 2019 dan 2020, serta upaya riset mendalam yang disajikan dalam Laporan Kompatibilitas Browser MDN 2020. Penelitian tambahan telah dilakukan di berbagai saluran, seperti Negara Bagian CSS dan Status JS survei.

Tujuan pada tahun 2021 ini adalah untuk meniadakan masalah kompatibilitas browser dalam lima fokus utama area sehingga developer dapat membangunnya dengan percaya diri sebagai fondasi yang dapat diandalkan. Ini upaya ini disebut #Compat 2021.

Memilih apa yang akan difokuskan

Meskipun ada masalah kompatibilitas browser pada dasarnya semua web platform ini, fokus proyek ini adalah pada sejumlah kecil masalah yang paling area yang dapat ditingkatkan secara signifikan, sehingga menghilangkannya sebagai masalah utama bagi developer.

Proyek kompatibilitas menggunakan beberapa kriteria yang mempengaruhi area mana yang akan prioritaskan, dan beberapa di antaranya:

Lima area fokus utama tahun 2021

Pada tahun 2020, Chromium mulai menangani area teratas yang diuraikan dalam Meningkatkan kompatibilitas browser Chromium pada tahun 2020. Pada tahun 2021, kami memulai upaya khusus untuk melangkah lebih jauh. Google dan Microsoft bekerja sama untuk mengatasi masalah teratas di Chromium, bersama dengan Igalia. Igalia, yang merupakan kontributor tetap ke Chromium dan WebKit, serta pengelola porta WebKit resmi untuk perangkat tersemat, sangat mendukung dan terlibat dalam upaya kompatibilitas ini, dan akan membantu mengatasi dan melacak masalah yang teridentifikasi.

Berikut adalah area yang berkomitmen untuk diperbaiki pada tahun 2021.

Flexbox CSS

flexbox CSS bernilai digunakan secara luas di web dan masih ada beberapa tantangan besar bagi pengembang. Misalnya, Chromium dan WebKit mengalami masalah dengan container fleksibel auto-height yang menyebabkan gambar salah ukuran.

Foto papan catur yang direntangkan.
Gambar salah ukuran karena bug.
Papan catur.
Gambar disesuaikan ukurannya.
Foto oleh Alireza Mahmoudi.

flexbox Cats Igalia posting blog membahas lebih dalam mengenai masalah ini dengan lebih banyak contoh.

Mengapa diprioritaskan

Petak CSS

Petak CSS adalah elemen penyusun inti untuk tata letak web modern, yang menggantikan banyak teknik lama dan solusi alternatif. Seiring meningkatnya adopsi, sistem harus kokoh, sehingga perbedaan antar {i>browser<i} tidak pernah menjadi alasan untuk menghindarinya. Satu area yang kurang adalah kemampuan untuk menganimasikan tata letak petak, yang didukung di Gecko tetapi tidak Chromium atau WebKit. Jika didukung, efek seperti ini dimungkinkan:

Demo animasi catur oleh Chen Hui Jing.

Mengapa diprioritaskan

Posisi CSS: melekat

Posisi melekat memungkinkan konten menempel di tepi area pandang dan umumnya digunakan untuk header yang selalu terlihat di bagian atas area pandang. Saat didukung di semua browser, ada kasus penggunaan umum saat browser tidak berfungsi sebagaimana mestinya. Misalnya, header tabel melekat saat ini tidak didukung di Chromium, didukung di balik flag, hasilnya tidak konsisten di seluruh browser:

Chromium dengan "TablesNG"
Tokek
WebKit

Lihat header tabel melekat demo oleh Rob Flack.

Mengapa diprioritaskan

Properti rasio aspek CSS

Yang baru aspect-ratio Properti CSS memudahkan untuk mempertahankan rasio lebar tinggi yang konsisten untuk elemen, meniadakan kebutuhan akan elemen Peretasan padding-top:

Menggunakan padding-top
.container {
  width: 100%;
  padding-top: 56.25%;
}
Menggunakan rasio aspek
.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Karena ini adalah kasus penggunaan umum, ini diharapkan akan banyak digunakan, dan kita ingin memastikannya solid di semua skenario umum dan di seluruh {i>browser<i}.

Mengapa diprioritaskan

  • Survei: Sudah dikenal luas tetapi belum banyak digunakan di Negara Bagian CSS
  • Tes: 27% lulus di semua browser
  • Penggunaan: 3% dan diperkirakan akan tumbuh

Transformasi CSS

Transformasi CSS telah didukung di semua browser selama bertahun-tahun dan banyak digunakan di web. Namun demikian, masih banyak area di mana mereka tidak bekerja dengan di seluruh browser, terutama dengan animasi dan transformasi 3D. Misalnya, sebuah kartu efek balik bisa sangat tidak konsisten di seluruh browser:

Efek membalik kartu di Chromium (kiri), Gecko (tengah), dan WebKit (kanan). Demo oleh David Baron dari bug komentar.

Mengapa diprioritaskan

Cara berkontribusi dan mengikuti

Ikuti dan bagikan semua info terbaru yang kami posting @ChromiumDev atau milis publik, Compat 2021. Memastikan ada bug, atau laporkan untuk masalah yang Anda alami Anda, dan jika ada yang kurang, hubungi saluran TV Anda.

Anda akan mendapatkan info terbaru secara berkala tentang progresnya di web.dev dan Anda dapat juga mengikuti progres untuk setiap area fokus dalam class Compat 2021 Dasbor.

Dasbor Compat 2021
Dasbor Compat 2021 (screenshot diambil pada 16 November 2021).

Kami berharap upaya bersama di antara vendor browser ini untuk meningkatkan keandalan dan interoperabilitas akan membantu Anda membangun hal-hal menakjubkan di web!