Update pertengahan tahun Interop 2024

Saat kita memasuki paruh kedua tahun ini, ini adalah saat yang tepat untuk melihat bagaimana Interop 2024 telah meningkatkan interoperabilitas web tahun ini.

Pada awal tahun, Chrome memiliki skor dukungan browser eksperimental sebesar 83.

Dasbor dengan skor-Interop: 65, Investigasi: 0, Chrome Canary: 83, Edge Dev: 82, Firefox Nightly: 80, Safari Technology Preview: 79.
Dasbor Interop 2024 pada Februari 2024.
Dasbor dengan skor-Interop: 75, Investigasi: 5, Chrome Canary: 90, Edge Dev: 89, Firefox Nightly: 87, Safari Technology Preview: 88.
Dasbor interop 2024 pada akhir Juni 2024.

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>

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 125.
  • Safari: 17.

Source

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.

Browser Support

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 128.
  • Safari: 16.4.

Source

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.

Browser Support

  • Chrome: 127.
  • Edge: 127.
  • Firefox: 3.
  • Safari: 16.4.

Source

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.

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.5.

Source


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.