Saat kita memasuki paruh kedua tahun ini, ini adalah saat yang tepat untuk melihat bagaimana Interop 2024 telah meningkatkan interoperabilitas web tahun ini.
Awal mulanya
Pada awal tahun, Chrome memiliki skor dukungan browser eksperimental sebesar 83.
Saat ini skornya adalah 90, dengan skor untuk browser stabil sebesar 85 sejak rilis Chrome 126 pada bulan Juni. Skor interop eksperimental secara keseluruhan telah meningkat 10 poin, dan postingan ini membagikan beberapa fitur yang telah berkontribusi pada skor tersebut.
Popover
Popover menjadi bagian dari Dasar Pengukuran yang Baru Tersedia pada April 2024. Popover
sangat menarik karena begitu banyak fitur UI yang perlu Anda buat—misalnya,
menu, tooltip, overlay untuk membuat pilihan, dan UI pengajaran—adalah jenis
popover. Sebelum popover, membuat salah satu fitur ini memerlukan banyak kode kustom. Kode untuk memastikan beberapa elemen tidak terbuka sekaligus, atau untuk mengaktifkan
penonaktifan ringan saat pengguna mengklik di luar elemen. Anda mungkin juga
memiliki masalah dengan z-index
, untuk memastikan elemen UI tetap berada di atas
antarmuka lainnya.
Semua fitur ini dan lainnya disertakan dalam Popover API, yang menghemat waktu pengembangan, dan membantu membuat antarmuka yang lebih berperforma tinggi dan mudah diakses. Misalnya, kode berikut membuat popover dengan light-dismiss, yang akan menutup popover lain secara otomatis saat dibuka.
<button popovertarget="my-popover">Open Popover</button>
<div id="my-popover" popover>
<p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.</p>
</div>
Cari tahu selengkapnya di Popover API hadir di Dasar Pengukuran. Banyak aplikasi yang sudah melihat manfaat Popover. Tokopedia dapat mengurangi jumlah kode React secara signifikan dengan memanfaatkan fitur ini, menggunakan polyfill untuk browser yang tidak mendukung.
Properti kustom lanjutan dengan @property
Aturan CSS @property
memungkinkan Anda membuat properti kustom lanjutan, dengan detail yang jauh lebih lengkap daripada nama dan nilai yang tersedia di properti kustom standar.
Tetapkan sintaksis yang diizinkan untuk menentukan jenis data yang disimpan properti ini—misalnya, warna, angka, atau panjang. Kemudian, tetapkan apakah properti
diwarisi, dan nilai awal.
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
Aturan @property
saat ini meningkatkan skor eksperimental untuk Firefox,
sehingga meningkatkan skor stabil saat Firefox 128 dirilis akhir bulan ini. Laporan ini juga bergabung dengan Dasar Pengukuran yang Baru Tersedia.
Pelajari lebih lanjut di @property: memberi kekuatan super pada variabel CSS.
Properti font-size-adjust
Properti font-size-adjust
CSS memungkinkan Anda mengubah ukuran huruf
kecil relatif terhadap ukuran huruf besar. Hal ini berguna dalam situasi
saat penggantian font mungkin terjadi, karena membantu memastikan font penggantian masih
dapat dibaca, terutama pada ukuran font kecil.
Properti font-size-adjust
saat ini disertakan dalam skor eksperimental
untuk Chrome, tetapi akan meningkatkan skor stabil saat dirilis dengan
Chrome 127 bulan ini. Laporan ini juga bergabung dengan Dasar Pengukuran yang Baru Tersedia.
text-wrap: balance
Penggunaan text-wrap: balance
akan menginstruksikan browser untuk mencari tahu pengelompokan baris yang paling seimbang
untuk teks. Hal ini sangat berguna untuk judul, misalnya mencegah
judul disambungkan ke satu kata di baris kedua.
Fitur ini baru-baru ini didukung oleh Safari, dengan browser lain berupaya memperbaiki pengujian yang gagal untuk memastikan fitur ini berfungsi dengan baik di semua browser.
Selain fitur utama ini menjadi interoperabilitas, banyak peningkatan lainnya telah dilakukan. Setiap pengujian yang lulus mewakili masalah interoperabilitas yang tidak akan Anda alami. Kami ingin melihat seberapa dekat kami bisa mencapai skor 100% tersebut pada akhir tahun.