Baru menggunakan platform web pada bulan Maret

Temukan beberapa fitur menarik yang telah diluncurkan di browser web stabil dan beta selama Maret 2024.

Rachel Andrew

Rilis browser stabil

Pada Maret 2024, Firefox 124, Safari 17.4, dan Chrome 123 menjadi stabil. Postingan ini membahas fitur baru yang ditambahkan ke platform web.

Menyesuaikan skema warna dengan light-dark()

Fungsi warna light-dark() dihadirkan di Chrome 123 dan memudahkan penyesuaian skema warna dengan preferensi pengguna. Dalam contoh berikut, color-scheme ditetapkan ke light dark di root. Properti kustom menggunakan fungsi warna light-dark() untuk menetapkan warna yang akan dialihkan, bergantung pada preferensi mode terang atau gelap pengguna.

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

Temukan contoh dan detail selengkapnya di Warna dependen color-scheme CSS dengan light-dark()

Dukungan Browser

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Sumber

Kontrol input yang lebih baik dengan field-sizing

Selain itu, di Chrome 123, properti field-sizing memungkinkan kolom input teks yang bertambah secara otomatis.

Dukungan Browser

  • Chrome: 123.
  • Edge: 123.
  • Firefox: tidak didukung.
  • Safari: tidak didukung.

Sumber

Kerning untuk tanda baca CJK dengan text-spacing-trim

Di Chrome 123, properti text-spacing-trim menerapkan kerning ke karakter tanda baca China, Jepang, dan Korea (CJK) untuk menyesuaikan spasi yang berlebihan. Baca selengkapnya di Memperkenalkan empat fitur internasional baru untuk CSS.

Dukungan Browser

  • Chrome: 123.
  • Edge: 123.
  • Firefox: tidak didukung.
  • Safari: tidak didukung.

Sumber

Aturan at-rule CSS @scope

Safari 17.4 menyertakan @scope yang memungkinkan Anda memilih elemen di sub-pohon DOM tertentu, menargetkan elemen secara akurat tanpa menulis pemilih yang terlalu spesifik yang sulit diganti, dan tanpa menggabungkan pemilih Anda terlalu erat dengan struktur DOM.

Pelajari lebih lanjut di Membatasi jangkauan pemilih dengan aturan @scope CSS

Dukungan Browser

  • Chrome: 118.
  • Edge: 118.
  • Firefox: di balik bendera.
  • Safari: 17.4.

Sumber

Peningkatan picture-in-picture

Chrome 123 menyertakan dua fitur untuk meningkatkan pengalaman picture-in-picture. Yang pertama adalah mode tampilan picture-in-picture CSS. Hal ini memungkinkan Anda menulis aturan CSS tertentu yang hanya diterapkan saat (bagian dari) aplikasi web ditampilkan dalam mode picture-in-picture.

Fitur kedua memungkinkan Anda menggunakan opener.focus dari jendela picture-in-picture dokumen untuk mengarahkan fokus tingkat sistem ke tab yang memiliki jendela picture-in-picture dokumen.

Tindakan ini memungkinkan Anda mengembalikan tab asli ke latar depan jika diperlukan. Misalnya, saat pengguna perlu mengakses pengalaman UI yang tidak sesuai dengan jendela picture-in-picture yang lebih kecil.

Dukungan untuk align-content dalam tata letak blok dan tabel

Chrome 123 dan Safari 17.4 menyertakan dukungan untuk align-content dalam tata letak blok dan tabel. Baca tentang perubahan pada dukungan align-content.

API Perutean Statis Pekerja Layanan

Dari Chrome 123, Service Worker Static Routing API tersedia. API ini memungkinkan Anda menyatakan secara deklaratif cara jalur resource tertentu harus diambil, yang berarti browser tidak perlu menjalankan pekerja layanan hanya untuk mengambil respons dari cache, atau langsung dari jaringan.

Cari tahu lebih lanjut di Menggunakan Service Worker Static Routing API untuk mengabaikan pekerja layanan untuk jalur tertentu.

Long Animation Frames API

Chrome 123 juga menyertakan Long Animation Frames API, yang merupakan update untuk Long Tasks API guna memberikan pemahaman yang lebih baik tentang update antarmuka pengguna (UI) yang lambat. Hal ini dapat berguna untuk mengidentifikasi frame animasi lambat yang cenderung memengaruhi metrik Core Web Vitals Interaction to Next Paint (INP) yang mengukur responsivitas, atau untuk mengidentifikasi jank UI lainnya yang memengaruhi kelancaran.

Dukungan Browser

  • Chrome: 123.
  • Edge: 123.
  • Firefox: tidak didukung.
  • Safari: tidak didukung.

Sumber

Properti content-visibility

Firefox 124 menyertakan dukungan untuk properti CSS content-visibility. Properti ini mengontrol apakah elemen merender kontennya sama sekali, sehingga browser menghapus rendering konten hingga diperlukan.

Dukungan Browser

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 125.
  • Safari: 18.

Sumber

Penambahan ke ArrayBuffer dan pengelompokan array

Di Safari 17.4, JavaScript mendapatkan beberapa fitur baru dengan dukungan untuk properti detached dan metode transfer() dan transferToFixedLength() dari ArrayBuffer.

Dukungan Browser

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 122.
  • Safari: 17.4.

Sumber

Safari 17.4 juga menyertakan metode pengelompokan array Object.groupBy dan Map.groupBy. Untuk mempelajari pengelompokan array lebih lanjut, baca JavaScript mendapatkan metode pengelompokan array.

Dukungan Browser

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 119.
  • Safari: 17.4.

Sumber

Fitur ini kini dapat dioperasikan secara bersama-sama dan bergabung dengan Dasar Pengukuran yang Baru Tersedia.

setHTMLUnsafe dan parseHTMLUnsafe

Pengiriman metode setHTMLUnsafe dan parseHTMLUnsafe di Safari 17.4 memungkinkan DOM Shadow deklaratif digunakan dari JavaScript. Metode ini juga menawarkan cara yang lebih mudah untuk mengurai HTML secara imperatif ke dalam DOM, dibandingkan dengan innerHTML atau DOMParser.

Rilis browser beta

Versi browser Beta memberi Anda pratinjau hal-hal yang akan ada di versi browser stabil berikutnya. Inilah waktu yang tepat untuk menguji fitur baru, atau penghapusan, yang dapat memengaruhi situs Anda sebelum rilis tersebut dipublikasikan. Versi beta baru adalah Firefox 125 dan Chrome 124. Rilis ini menghadirkan banyak fitur hebat ke platform. Lihat catatan rilis untuk mengetahui detailnya. Berikut adalah beberapa sorotan.

Firefox 125 siap menjadi rilis yang menarik. Fungsi ini mencakup align-content pada blok, sehingga fitur ini dapat dioperasikan. Yang juga disertakan, dan karenanya menjadi bagian dari Dasar Pengukuran yang Baru Tersedia, adalah Popover API. Properti transition-behavior juga akan didukung. Popover dan transition-behavior adalah bagian dari Interop 2024.

Chrome 124 menyertakan metode setHTMLUnsafe dan parseHTMLUnsafe untuk memungkinkan Declarative Shadow DOM digunakan dari JavaScript, sehingga fitur ini dapat dioperasikan secara interoperabilitas. Yang juga disertakan adalah WebSocketStream API, dan atribut writingsuggestions.