Google bekerja sama dengan vendor browser dan partner industri lainnya untuk memperbaiki lima masalah utama terkait kompatibilitas browser untuk developer web: CSS flexbox, CSS Grid, position: sticky, aspect-ratio, dan transformasi CSS.
Google bekerja sama dengan vendor browser dan partner industri lainnya untuk memperbaiki
lima masalah kompatibilitas browser teratas untuk developer web. Area fokusnya
adalah transformasi flexbox CSS, Petak CSS, position: sticky, aspect-ratio, dan
CSS. Lihat Cara berkontribusi dan ikuti pembahasannya untuk
mempelajari cara ikut serta.
Latar belakang
Kompatibilitas di web selalu menjadi tantangan besar bagi developer. Dalam beberapa tahun terakhir, Google dan partner lainnya, termasuk Mozilla dan Microsoft, telah mulai mempelajari lebih lanjut poin masalah utama bagi developer web, untuk mendorong pekerjaan dan penentuan prioritas kami untuk memperbaiki situasi. Project ini terkait dengan pekerjaan Kepuasan Developer Google (DevSAT), dan dimulai dalam skala yang lebih besar dengan pembuatan survei DNA (Penilaian Kebutuhan Developer) MN pada tahun 2019 dan 2020, serta upaya penelitian mendalam yang dipresentasikan dalam Laporan Kompatibilitas Browser MN 2020. Riset tambahan telah dilakukan di berbagai saluran, seperti survei State of CSS dan State of JS.
Tujuan pada tahun 2021 adalah menghilangkan masalah kompatibilitas browser di lima area fokus utama, sehingga developer dapat membangunnya dengan percaya diri sebagai fondasi yang andal. Upaya ini disebut #Compat 2021.
Memilih fokus yang akan
Meskipun ada masalah kompatibilitas browser pada dasarnya di semua platform web, fokus project ini adalah pada sejumlah kecil area yang paling bermasalah yang dapat diperbaiki secara signifikan, sehingga menghapusnya sebagai masalah utama bagi developer.
Project kompatibilitas menggunakan beberapa kriteria yang memengaruhi area mana yang akan diprioritaskan, dan beberapa di antaranya:
- Penggunaan fitur. Misalnya, flexbox digunakan pada 75% dari semua kunjungan halaman, dan penggunaannya terus berkembang di HTTP Archive.
- Jumlah bug (di Chromium, Gecko, WebKit), dan untuk Chromium, jumlah bintang yang dimiliki bug tersebut.
Hasil survei:
- Survei DNA MN
- Laporan Kompatibilitas Browser MN
- Status CSS fitur yang paling dikenal dan digunakan
Hasil pengujian dari pengujian platform web. Misalnya, flexbox di wpt.fyi.
Dapatkah saya menggunakan fitur yang paling banyak ditelusuri.
Lima area fokus utama pada 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 Chromium dan WebKit, serta pengelola port WebKit resmi untuk perangkat tersemat, sangat mendukung dan terlibat dalam upaya kompatibilitas ini, serta akan membantu mengatasi dan melacak masalah yang teridentifikasi.
Berikut adalah area yang kami akan perbaiki pada tahun 2021.
Flexbox CSS
flexbox CSS
banyak digunakan
di web dan masih ada beberapa tantangan besar bagi developer. Misalnya,
Chromium dan
WebKit
memiliki masalah dengan penampung fleksibel auto-height yang menyebabkan ukuran gambar salah.
Foto oleh Alireza Mahmoudi.
Postingan blog cats flexbox Igalia membahas lebih dalam masalah ini dengan lebih banyak contoh lainnya.
Mengapa hal ini diprioritaskan
- Survei: Masalah utama dalam Laporan Kompatibilitas Browser MMD, paling umum dan digunakan di State of CSS
- Pengujian: 85% lulus di semua browser
- Penggunaan: 75% kunjungan halaman, yang berkembang pesat di HTTP Archive
Petak CSS
Petak CSS adalah elemen penyusun inti untuk tata letak web modern, yang menggantikan banyak teknik dan solusi lama. Seiring dengan meningkatnya penggunaan, aplikasi harus kuat, sehingga perbedaan antar-browser tidak menjadi alasan untuk menghindarinya. Salah satu area yang kurang adalah kemampuan untuk menganimasikan tata letak petak, yang didukung di Gecko, tetapi tidak didukung di Chromium atau WebKit. Jika didukung, efek seperti ini dimungkinkan:
Mengapa hal ini diprioritaskan
- Survei: Posisi kedua dalam Laporan Kompatibilitas Browser MMD, terkenal tetapi jarang digunakan dalam Status CSS
- Pengujian: 75% lulus di semua browser
- Penggunaan: 8% dan terus tumbuh, sedikit pertumbuhan di HTTP Archive
Posisi CSS: melekat
Posisi melekat memungkinkan konten tetap berada di tepi area pandang dan biasanya digunakan untuk header yang selalu terlihat di bagian atas area pandang. Meskipun didukung di semua browser, ada kasus penggunaan umum saat browser tidak berfungsi sebagaimana mestinya. Misalnya, header tabel melekat tidak didukung di Chromium, dan meskipun sekarang didukung di belakang tanda, hasilnya tidak konsisten di seluruh browser:
Lihat demo header tabel melekat oleh Rob Flack.
Mengapa hal ini diprioritaskan
- Survei: Sangat dikenal/digunakan dalam State of CSS dan diajukan beberapa kali di Laporan Kompatibilitas Browser MMD
- Pengujian: 66% lulus di semua browser
- Penggunaan: 8%
Properti rasio aspek CSS
Properti CSS
aspect-ratio
yang baru memudahkan Anda mempertahankan rasio lebar tinggi yang konsisten untuk
elemen, sehingga tidak perlunya
peretasan padding-top yang terkenal:
.container {
width: 100%;
padding-top: 56.25%;
}
.container {
width: 100%;
aspect-ratio: 16 / 9;
}
Karena merupakan kasus penggunaan yang umum, hal ini diperkirakan akan digunakan secara luas, dan kami ingin memastikannya solid dalam semua skenario umum dan di seluruh browser.
Mengapa hal ini diprioritaskan
- Survei: Sudah dikenal, tetapi belum banyak digunakan di Status CSS
- Pengujian: 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 yang tidak berfungsi sama di seluruh browser, terutama dengan animasi dan transformasi 3D. Misalnya, efek kartu flip bisa sangat tidak konsisten di seluruh browser:
Mengapa hal ini diprioritaskan
- Survei: Sangat terkenal dan digunakan dalam State of CSS
- Pengujian: 55% lulus di semua browser
- Penggunaan: 80%
Cara berkontribusi dan mengikuti
Ikuti dan bagikan semua info terbaru yang kami posting di @ChromiumDev atau milis publik, Compat 2021. Pastikan bug ada, atau laporkan untuk masalah yang Anda alami, dan jika ada yang hilang, hubungi melalui saluran di atas.
Akan ada update rutin tentang progresnya di sini di web.dev dan Anda juga dapat mengikuti progres setiap area fokus di Compat 2021 Dashboard.
Kami harap upaya bersama dari para vendor browser untuk meningkatkan keandalan dan interoperabilitas ini akan membantu Anda membuat berbagai hal yang luar biasa di web.