Update pertengahan tahun Interop 2024

Rachel Andrew

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.

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.