Temukan beberapa fitur menarik yang telah diluncurkan di browser web stabil dan beta selama Agustus 2024.
Rilis browser stabil
Pada Agustus 2024, Firefox 129 dan Chrome 128 menjadi stabil. Postingan ini membahas fitur baru yang ditambahkan ke platform web.
Pembaruan pada pemformatan ruby
Elemen <ruby>
HTML adalah alat yang efektif untuk meningkatkan kualitas presentasi teks, terutama untuk bahasa Asia Timur. Elemen ini memungkinkan Anda menampilkan anotasi fonetik atau informasi tambahan lainnya di atas atau di samping teks dasar. Mulai Chrome 128, anotasi ruby dapat dipecah barisnya, dan Anda dapat menata gaya teks ruby dengan properti CSS ruby-align
.
Pelajari lebih lanjut di
Properti <ruby>
dan ruby-align
CSS yang dapat dipecah baris.
PointerEvent.deviceProperties
untuk Coretan Multi-Pena
Perubahan ini, yang dikirimkan di Chrome 128, memberikan cara yang aman dan andal untuk mengidentifikasi setiap pena (pointer) yang berinteraksi dengan layar untuk menetapkan warna atau bentuk pena tertentu untuk setiap perangkat yang berinteraksi dengan digitizer. Class ini memperluas antarmuka PointerEvent
untuk menyertakan atribut baru, deviceProperties
. Ini berisi atribut uniqueId
, yang mewakili ID unik yang persisten di sesi dan terisolasi dokumen yang dapat Anda gunakan dengan andal untuk mengidentifikasi setiap pena yang berinteraksi dengan halaman.
Promise.try
Selain itu, di Chrome 128, Promise.try
memudahkan penanganan error dengan Promise. Ada pola tempat Anda memiliki fungsi, f
. Fungsi ini mungkin asinkron, dan menampilkan Promise, atau mungkin tidak. Untuk menggunakan semantik Promise guna menangani error dalam kedua kasus tersebut, Anda menggabungkan fungsi dalam Promise. Hal ini biasanya dicapai dengan new Promise(resolve => resolve(f()))
.
Promise.try
adalah cara yang lebih mudah untuk mencapai hal yang sama. Dengan begitu, Anda dapat memulai rantai Promise yang menangkap semua error di pengendali .catch
, bukan harus menangani alur pengecualian sinkron dan asinkron.
Menganimasikan efek entri
Firefox 129 menyertakan dua fitur CSS yang digunakan untuk menganimasikan efek entri, dan fitur ini kini tersedia di Dasar Pengukuran.
Aturan @starting-style
menentukan gaya awal pada elemen sebelum dirender di halaman. Hal ini diperlukan untuk elemen yang dianimasikan dari display: none, karena elemen tersebut memerlukan status untuk dianimasikan.
Efek entri juga memerlukan animasi properti terpisah, yaitu properti yang tidak dapat melakukan interpolasi antar-nilai.
Hal ini kini dapat dicapai dengan transition-behavior: allow-discrete
atau nilai allow-discrete
dalam singkatan transisi Anda.
Fitur ini juga kini didukung di Firefox 129.
Pelajari lebih lanjut di Sekarang di Dasar Pengukuran: menganimasikan efek entri.
Penambahan ke PerformanceResourceTiming
Firefox 129 menambahkan properti contentType
dan responseStatus
dari antarmuka PerformanceResourceTiming
.
Kedua nilai ini masing-masing menunjukkan jenis konten resource yang diambil dan kode status respons HTTP yang ditampilkan saat mengambil resource.
contentType
responseStatus
Metode toJSON()
geolokasi
Di Firefox 129 juga ada GeolocationCoordinates.toJSON()
dan GeolocationPosition.toJSON()
.
WebDriver BiDi
Firefox 129 kini memiliki dukungan untuk WebDriver BiDi. Artinya, Anda dapat menggunakan Puppeteer dengan Chrome atau Firefox untuk otomatisasi. Pelajari lebih lanjut di WebDriver BiDi siap produksi di Firefox, Chrome, dan Puppeteer serta Mengumumkan Dukungan Puppeteer Resmi untuk Firefox.
Rilis browser beta
Versi browser Beta memberi Anda pratinjau hal-hal yang akan ada di browser versi 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 130 dan Chrome 129. Versi beta Safari 18 masih berlangsung. Rilis ini menghadirkan banyak fitur hebat ke platform. Lihat catatan rilis untuk mengetahui semua detailnya. Berikut adalah beberapa sorotan.
Firefox 130 mendukung atribut nama elemen <details>
yang mengelompokkan elemen <details>
, dengan hanya satu elemen dalam grup yang dapat dibuka dalam satu waktu. Dengan begitu, Anda dapat membuat akordeon eksklusif tanpa menggunakan JavaScript.
Chrome 129 menambahkan properti interpolate-size
dan fungsi calc-size()
CSS.
Properti interpolate-size
CSS memungkinkan halaman memilih untuk menggunakan 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 saat ini didukung adalah auto
, min-content
, max-content
, dan fit-content
.
Di Chrome 129 juga terdapat Intl.DurationFormat
, yang menyediakan metode untuk memformat durasi, misalnya "1 jam 40 menit 30 detik" yang mendukung beberapa lokalitas.