Baru menggunakan platform web pada bulan Maret

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

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() tersedia di Chrome 123 dan memudahkan penyesuaian skema warna dengan preferensi pengguna. Dalam contoh berikut, color-scheme disetel ke light dark di root. Properti khusus menggunakan fungsi warna light-dark() untuk menetapkan warna yang akan diganti sesuai dengan 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 lainnya dalam warna yang bergantung pada color-scheme CSS dengan light-dark()

Kontrol input yang lebih baik dengan field-sizing

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

Kerning untuk tanda baca CJK dengan text-spacing-trim

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

CSS @scope yang utama

Safari 17.4 menyertakan @scope yang memungkinkan Anda memilih elemen dalam sub-hierarki DOM tertentu, menargetkan elemen secara tepat tanpa menulis pemilih yang terlalu spesifik yang sulit diganti, dan tanpa mengaitkan pemilih terlalu erat dengan struktur DOM.

Pelajari lebih lanjut di Membatasi jangkauan pemilih dengan CSS @scope at-rule

Peningkatan picture-in-picture

Chrome 123 menyertakan dua fitur untuk meningkatkan pengalaman picture-in-picture. Yang pertama adalah picture-in-picture mode tampilan CSS. Dengan begitu, Anda dapat menulis aturan CSS khusus 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 memindahkan 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 perubahan pada dukungan align-content.

API Perutean Statis Pekerja Layanan

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

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

API Frame Animasi Panjang

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

Properti content-visibility

Firefox 124 menyertakan dukungan untuk properti content-visibility CSS. Properti ini mengontrol apakah suatu elemen akan merender kontennya atau tidak, sehingga browser dapat menghilangkan rendering konten tersebut hingga diperlukan.

Penambahan ke ArrayBuffer dan pengelompokan array

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

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.

Fitur-fitur ini sekarang dapat dioperasikan sehingga bergabung dengan Baseline yang Baru Tersedia.

setHTMLUnsafe dan parseHTMLUnsafe

Pengiriman metode setHTMLUnsafe dan parseHTMLUnsafe di Safari 17.4 memungkinkan Declarative Shadow DOM 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 berbagai hal yang akan disertakan dalam browser versi stabil berikutnya. Ini adalah waktu yang tepat untuk menguji fitur baru, atau penghapusan, yang dapat memengaruhi situs Anda sebelum rilis tersebut dipublikasikan. Versi beta yang baru adalah Firefox 125 dan Chrome 124. Rilis ini menghadirkan banyak fitur hebat ke platform ini. Lihat catatan rilis untuk semua detailnya. Berikut beberapa sorotan.

Firefox 125 siap menjadi rilis yang menarik. Kode ini menyertakan align-content pada blok, sehingga fitur ini dapat dioperasikan bersama. Popover API juga disertakan, sehingga menjadi bagian dari Baseline Baru Tersedia. Properti transition-behavior juga akan didukung. Popover dan transition-behavior adalah bagian dari Interop 2024.

Chrome 124 menyertakan metode setHTMLUnsafe dan parseHTMLUnsafe agar Declarative Shadow DOM dapat digunakan dari JavaScript, sehingga fitur ini dapat dioperasikan bersama. Selain itu, terdapat WebSocketStream API, dan atribut writingsuggestions.