Pada tahun 2023, semua vendor browser utama, dan pemangku kepentingan lainnya, bekerja sama untuk mengatasi masalah kompatibilitas browser teratas.
Pada tahun 2023, semua vendor browser utama dan pemangku kepentingan lainnya kembali bekerja sama untuk mengatasi masalah kompatibilitas browser teratas. Upaya ini dimulai dalam skala ini dengan Interop 2022, dan Anda dapat mempelajari pencapaian yang telah kita capai bersama di postingan akhir tahun. Semua orang yang terlibat percaya bahwa hal ini akan membantu meningkatkan pengalaman bagi developer web di mana saja. Tahun ini, untuk pertama kalinya, kami mengumumkan proses proposal secara publik dan mendapatkan banyak saran bagus dari framework, perusahaan besar, vendor browser, dan developer dari mana saja.
Area fokus Interop 2023
Kali ini, kami memiliki setidaknya 26 area fokus, yang dijelaskan secara mendetail dalam dokumen project kami. Yaitu, dalam urutan abjad:
- Gambar Batas di CSS
- Ruang Warna dan Fungsi di CSS
- Kueri Penampung di CSS
- Pembatasan di CSS
- Class Pseudo CSS
- Properti Kustom di CSS
- Kotak Fleksibel
- Deteksi fitur font dan palet
- Formulir
- Petak
- :has()
- Inert
- Penyamaran di CSS
- Fungsi Matematika di CSS
- Kueri Media
- Modul di Web Worker
- Jalur Gerakan di Animasi CSS
- Kanvas di Luar Layar
- Peristiwa Pointer dan mouse
- URL
- Compat Web 2023: Area fokus umum untuk bug kecil yang menyebabkan masalah kompatibilitas situs umum
- Codec Web (video)
- Komponen Web
Anda dapat menemukan detail lengkap tentang semua area fokus di Web Platform Tests berdasarkan MDN Web Docs, tetapi berikut beberapa yang mungkin akan Anda sukai.
Kueri Container
Kueri penampung telah menjadi permintaan teratas dari developer selama bertahun-tahun, serta pada tahun 2022 Chrome dan Safari mengirimkannya. Firefox mengharapkan mengirimkan kueri container di Firefox 110, dan pengujian untuk area fokus ini akan membantu memastikan bahwa kueri container dapat berfungsi dengan andal lintas browser dan sesuai dengan spesifikasinya.
:has(...)
Developer sudah lama meminta pemilih induk di CSS. Class pseudo :has() memungkinkan banyak kasus penggunaan untuk pemilih induk, serta memilih elemen seinduk sebelumnya sehubungan dengan elemen referensi. Misalnya, gambar yang memiliki teks dapat ditata gayanya dengan teks yang tidak memiliki teks. Pelajari lebih lanjut kasus penggunaan has() di :has(), pemilih keluarga.
Properti Kustom
Properti khusus CSS, yang juga dikenal sebagai variabel CSS, memungkinkan untuk menentukan nilai sekali dalam stylesheet dan menggunakannya kembali di banyak tempat, sehingga mengurangi pengulangan. Misalnya, Anda dapat menentukan warna atau ukuran font umum sekali dalam stylesheet dan menggunakannya di seluruh komponen. Dukungan dasar untuk properti khusus telah lama ada di browser. Interop 2023 berfokus pada @property at-rule. @property mewakili pendaftaran properti kustom di stylesheet, yang memungkinkan pemeriksaan jenis properti, menetapkan nilai default, dan apakah properti harus mewarisi nilai atau tidak. Pelajari lebih lanjut di @property: memberikan kekuatan super pada variabel CSS.
Penyamaran CSS
Penyamaran CSS menyediakan metode untuk menerapkan efek gambar, seperti yang mungkin Anda lihat di aplikasi grafis, menggunakan CSS. Dukungan untuk berbagai properti penyamaran tidak lengkap, sehingga pembuatan masking lebih sulit digunakan. Area fokus ini akan membantu developer menggunakan efek materi iklan di berbagai browser tanpa ragu. Pelajari lebih lanjut cara menerapkan efek ke gambar dalam artikel tentang masking gambar.
OffscreenCanvas
Elemen <canvas> dan Canvas API menyediakan cara dengan skrip untuk menggambar grafis ke layar. Namun, hal ini dapat menyebabkan masalah performa karena pekerjaan diselesaikan pada thread yang sama dengan interaksi pengguna. OffscreenCanvas menawarkan kanvas kepada developer yang dipisahkan dari DOM dan Canvas API. Developer juga dapat menjalankan tugas rendering di Web Worker, terpisah dari thread utama. Pelajari lebih lanjut manfaat performa OffscreenCanvas.
Peristiwa pointer dan mouse
Peristiwa pointer diaktifkan saat berinteraksi dengan halaman menggunakan mouse, pena, stilus, atau layar sentuh. Peristiwa mouse diaktifkan saat menggunakan mouse, tetapi karena alasan historis juga untuk sentuhan. Area fokus ini mencakup perilaku interaksi pointer dan mouse dengan halaman, termasuk bagaimana interaksinya dengan hit testing dan area scroll. Area fokus untuk tahun 2023 tidak mencakup sentuhan dan stilus, karena kurangnya Pengujian Platform Web di area ini.
WebCodecs
WebCodecs API menyediakan metode bagi developer untuk mengakses frame video individual, dan potongan audio. Menawarkan akses ke codec yang sudah tersedia di browser, dan berbagai antarmuka untuk berinteraksi dengannya. Artikel Pemrosesan video dengan WebCodecs menunjukkan cara menggunakan API untuk mendekode dan merender frame tertentu ke kanvas.
Komponen Web
Komponen Web adalah istilah umum untuk sejumlah teknologi yang digunakan untuk membuat komponen yang dapat digunakan kembali, seperti Elemen Khusus dan Shadow DOM. Interop 2023 akan berfokus pada peningkatan interoperabilitas teknologi dasar ini.
Dasbor
Ikuti progres sepanjang tahun di dasbor Interop 2023, tempat Anda dapat melihat skor saat ini dan status penanganan area fokus ini di semua mesin browser utama.
Skor Area Fokus dihitung berdasarkan tingkat kelulusan pengujian. Jika Anda memiliki masukan atau ingin berkontribusi dalam peningkatan kualitas WPT, ajukan masalah untuk meminta pembaruan kumpulan tes yang digunakan untuk penskoran.
