Memasuki paruh kedua tahun ini, inilah saat yang tepat untuk melihat bagaimana Interop 2024 telah meningkatkan interoperabilitas web tahun ini.
Dari mana kita memulai
Pada awal tahun, Chrome memiliki skor dukungan browser eksperimental 83.
![Dasbor dengan skor-Interop: 65, Investigasi: 0, Chrome Canary: 83, Edge Dev: 82, Firefox Nightly: 80, Safari Technology Preview: 79.](https://web.dev/static/blog/interop-2024-midyear/image/interop-feb.png?hl=id)
![Dasbor dengan skor-Interop: 75, Investigasi: 5, Chrome Canary: 90, Edge Dev: 89, Firefox Nightly: 87, Safari Technology Preview: 88.](https://web.dev/static/blog/interop-2024-midyear/image/interop-june.png?hl=id)
Hari ini skor tersebut adalah 90, dengan skor untuk browser stabil 85 pada 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 Baseline Newly Tersedia pada April 2024. Popover adalah
menarik karena begitu banyak fitur UI yang perlu Anda bangun—misalnya,
menu, tooltip, overlay untuk membuat pilihan, dan UI pengajaran—adalah jenis
pop-up. Sebelum pop-up muncul, pembuatan salah satu fitur ini melibatkan banyak
pada kode sumber. Kode untuk memastikan beberapa elemen tidak terbuka sekaligus, atau untuk mengaktifkan
ringan-menutup saat pengguna mengklik di luar elemen. Anda mungkin juga memiliki
kesulitan dengan z-index
, untuk memastikan elemen UI tetap berada di atas
antarmuka.
Semua fitur ini dan lainnya disertakan dalam Popover API, menghemat waktu pengembangan, dan membantu membuat antarmuka yang lebih andal dan mudah diakses. Sebagai contoh, kode berikut membuat {i>popover<i} dengan {i>light-Dismiss<i}, yang akan akan menutup otomatis {i>popover<i} lainnya ketika 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 lebih lanjut di Popover API hadir di Dasar Pengukuran. Banyak aplikasi sudah merasakan manfaat Popover. Tokopedia dapat mengurangi jumlah kode React secara signifikan dengan memanfaatkan fitur tersebut, menggunakan polyfill untuk browser yang tidak mendukung.
Properti khusus lanjutan dengan @property
Aturan CSS @property
memungkinkan Anda membuat properti khusus lanjutan, dengan banyak
lebih mendetail daripada nama dan nilai yang tersedia di properti kustom standar.
Tetapkan sintaksis yang diizinkan untuk menentukan jenis data yang ada di properti ini
contoh warna, angka, atau panjang. Kemudian, tetapkan apakah properti
diwarisi, dan nilai awal.
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
Saat ini aturan @property
meningkatkan skor eksperimental untuk Firefox,
meningkatkan skor stabil saat Firefox 128 dikirimkan pada akhir bulan ini. Ini juga menggabungkan
Dasar Pengukuran Baru Tersedia.
Pelajari lebih lanjut di @property: memberikan kekuatan super ke variabel CSS.
Properti font-size-adjust
Properti font-size-adjust
CSS memungkinkan Anda mengubah ukuran huruf kecil
huruf relatif terhadap ukuran huruf besar. Hal ini berguna dalam situasi
di mana penggantian font mungkin terjadi, karena membantu memastikan font pengganti
mudah dibaca, khususnya pada ukuran {i>font<i} kecil.
Properti font-size-adjust
saat ini disertakan dalam skor eksperimental
untuk Chrome, namun akan meningkatkan skor stabil saat dirilis dengan
Chrome 127 bulan ini. Ini juga bergabung dengan Baseline Newly Available.
text-wrap: keseimbangan
Penggunaan text-wrap: balance
menginstruksikan browser untuk mencari nilai keseimbangan terbaik
{i>line wrapping <i}untuk teks. Fungsi ini sangat berguna untuk {i>heading<i}, sehingga mencegah
{i>heading wrapping<i} yang menggabungkan satu kata
di baris dua, misalnya.
Hal ini baru-baru ini didukung oleh Safari, sementara browser lain sedang berupaya memperbaikinya gagal untuk memastikan fitur ini berfungsi dengan baik di semua {i>browser<i}.
Selain fitur-fitur utama yang dapat dioperasikan bersama, banyak perbaikan telah dilakukan. Setiap pengujian yang lulus mewakili masalah interoperabilitas yang tidak akan Anda temui. Kami senang melihat seberapa dekat bisa mencapai skor 100% pada akhir tahun.