Temukan beberapa fitur menarik yang telah hadir di browser web stabil dan beta selama September 2024.
Rilis browser stabil
Pada September 2024, Firefox 130, Safari 18, dan Chrome 129 menjadi stabil. Postingan ini membahas fitur baru yang ditambahkan ke platform web.
Akordeon eksklusif dengan atribut name
untuk <details>
Firefox 130 mendukung atribut name
dari elemen <details>
. Ini mengelompokkan
elemen <details>
, di mana hanya satu elemen dalam grup yang dapat dibuka pada
satu waktu. Hal ini memungkinkan Anda membuat akordeon eksklusif tanpa menggunakan JavaScript.
Dukungan Browser
Menganimasikan ke otomatis (dan lainnya)
Chrome 129 menambahkan properti interpolate-size
dan fungsi calc-size()
CSS.
Properti interpolate-size
CSS memungkinkan halaman memilih animasi dan
transisi kata kunci ukuran intrinsik CSS seperti auto
, min-content
, dan
fit-content
, jika kata kunci tersebut dapat dianimasikan.
Fungsi calc-size()
CSS adalah fungsi CSS yang mirip dengan calc()
, tetapi
juga mendukung operasi pada tepat satu kata kunci ukuran yang didukung.
Kata kunci ukuran yang didukung adalah auto
, min-content
, max-content
, dan
fit-content
.
Pelajari lebih lanjut di Menganimasikan ke tinggi: otomatis; (dan kata kunci ukuran intrinsik lainnya) di CSS.
Memformat durasi di JavaScript
Selain itu, di Chrome 129 adalah Intl.DurationFormat
, yang menyediakan metode pemformatan
durasi, misalnya "1 jam 40 menit 30 detik", yang mendukung beberapa lokalitas.
WebCodecs API
Web Codecs API kini didukung di desktop di Firefox 130, sehingga developer web mendapatkan akses tingkat rendah ke setiap frame streaming video dan bagian audio. Antarmuka baru mencakup: VideoEncoder
, VideoDecoder
,
EncodedVideoChunk
, VideoFrame
, dan VideoColorSpace
. API ini tidak sepenuhnya
membuat Baseline Baru tersedia karena belum didukung di Firefox Android,
tetapi ada dukungan Firefox Nightly untuk Android.
Kueri gaya CSS untuk properti khusus
Safari 18 menghadirkan dukungan untuk beberapa fitur baru termasuk Kueri Gaya CSS. Kueri gaya menyediakan cara untuk membuat gaya yang dapat digunakan kembali, dan menerapkannya sebagai grup. Misalnya, saat Anda memiliki komponen yang dapat digunakan kembali dengan beberapa variasi.
Pelajari lebih lanjut kueri gaya CSS.
Transisi tampilan dokumen yang sama
Safari 18 juga mendukung transisi tampilan dokumen yang sama untuk SPA, sehingga Anda dapat membuat transisi visual di antara berbagai status aplikasi.
Pelajari lebih lanjut transisi tampilan dokumen yang sama
Rilis browser beta
Versi browser Beta memberi Anda pratinjau hal-hal yang akan ada di versi browser stabil berikutnya. Ini adalah waktu yang tepat untuk menguji fitur baru, atau penghapusan, yang dapat memengaruhi situs Anda sebelum seluruh dunia mendapatkan rilis tersebut. Versi beta baru adalah Firefox 131, Chrome 130, dan Safari 18.1. Rilis ini menghadirkan banyak fitur hebat ke platform. Lihat catatan rilis untuk mengetahui semua detailnya. Berikut adalah beberapa sorotan.
Firefox 131 menyertakan helper iterator JavaScript baru dan Cookies Memiliki Independent Partitioned State (CHIPS) kini diaktifkan.
Chrome 130 menyertakan dukungan untuk box-decoration-break: clone
baik untuk fragmentasi inline (tata letak baris) maupun fragmentasi blok (fragmen yang dibuat untuk pencetakan dan multikolom). Ada juga pelaporan error yang lebih baik di IndexedDB,
dan atribut connected
baru untuk antarmuka SerialPort
Serial Web.
Safari 18.1 adalah rilis perbaikan bug pada fitur yang ada.