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.
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 developer. 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:
- Penggunaan fitur. Misalnya, {i>flexbox<i} digunakan pada 75% dari semua tayangan halaman, dan adopsi situs semakin meningkat di HTTP Arsipkan.
- Jumlah bug (di Chromium, Tokek, WebKit), dan untuk Chromium, berapa bintang yang dibintangi yang dimiliki serangga.
Hasil survei:
- Survei DNA MN
- Laporan Kompatibilitas Browser MDN
- Status CSS fitur yang paling dikenal dan digunakan
Hasil pengujian dari web-platform-tests. Misalnya, flexbox di wpt.fyi.
Dapatkah saya menggunakan fitur yang paling banyak ditelusuri.
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 oleh Alireza Mahmoudi.
flexbox Cats Igalia posting blog membahas lebih dalam mengenai masalah ini dengan lebih banyak contoh.
Mengapa diprioritaskan
- Survei: Masalah utama dalam Laporan Kompatibilitas Browser MDN, paling dikenal dan digunakan di Negara Bagian CSS
- Pengujian: 85% lulus di semua browser
- Penggunaan: 75% tayangan halaman, yang semakin meningkat di HTTP Arsipkan
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:
Mengapa diprioritaskan
- Survei: Juara kedua dalam Laporan Kompatibilitas Browser MDN, terkenal tetapi jarang digunakan di Negara Bagian CSS
- Pengujian: 75% lulus di semua browser
- Penggunaan: 8% dan tumbuh stabil, sedikit pertumbuhan dalam HTTP Arsipkan
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:
Lihat header tabel melekat demo oleh Rob Flack.
Mengapa diprioritaskan
- Survei: Sangat dikenal/digunakan di Negara Bagian CSS dan ditampilkan beberapa kali dalam Laporan Kompatibilitas Browser MDN
- Tes: 66% lulus di semua browser
- Penggunaan: 8%
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:
.container {
width: 100%;
padding-top: 56.25%;
}
.container {
width: 100%;
aspect-ratio: 16 / 9;
}
Karena ini adalah kasus penggunaan umum, ini diharapkan akan banyak digunakan, dan kami 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, masih ada 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:
Mengapa diprioritaskan
- Survei: Sangat dikenal dan digunakan di Negara Bagian CSS
- Tes: 55% lulus dalam semua ujian browser
- Penggunaan: 80%
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 rutin tentang progresnya di web.dev dan Anda dapat juga mengikuti progres untuk setiap area fokus dalam class Compat 2021 Dasbor.
Kami berharap upaya bersama di antara vendor browser ini untuk meningkatkan keandalan dan interoperabilitas akan membantu Anda membangun hal-hal menakjubkan di web!