Temukan beberapa fitur menarik yang telah diluncurkan di browser web stabil dan beta selama Mei 2024.
Rilis browser stabil
Pada Mei 2024, Firefox 126, Safari 17.5, dan Chrome 125 menjadi stabil. Postingan ini membahas fitur baru yang ditambahkan ke platform web.
Penentuan posisi anchor CSS
Chrome 125 menyertakan penentuan posisi anchor CSS. Hal ini memungkinkan Anda menautkan elemen yang diposisikan secara absolut ke satu atau beberapa elemen lain di halaman (anchor), dengan cara deklaratif, tanpa menggunakan JavaScript. Pemosisi anchor berfungsi dengan performa tinggi saat anchor dapat di-scroll. Kasus penggunaan yang umum adalah memosisikan popover seperti tooltip di samping elemen yang memanggilnya, atau menu pilih dan daftar opsi popovernya.
Pelajari lebih lanjut di Memperkenalkan CSS anchor positioning API.
Fungsi nilai bertahap CSS—round()
, mod()
, dan rem()
mod()
,rem()
Chrome 125 juga menyertakan fungsi nilai berundak, yang berarti fungsi ini kini
Baseline Baru Tersedia. Fungsi nilai berundak, round()
, mod()
, dan rem()
, semuanya mengubah nilai tertentu sesuai dengan "nilai langkah" lain.
Temukan informasi selengkapnya di Fungsi matematika nilai bertahap CSS kini ada di Dasar Pengukuran 2024.
Fungsi light-dark()
Yang juga bergabung dengan Dasar Pengukuran yang Baru Tersedia adalah fungsi warna CSS light-dark()
,
yang ada di Safari 17.5.
light-dark()
adalah fungsi yang menerima dua argumen, yang keduanya harus berupa <color>
. Salah satu dari keduanya dipilih bergantung pada skema warna yang digunakan.
- Jika skema warna yang digunakan adalah
light
atau tidak diketahui, nilai yang dihitung dari nilai pertama akan ditampilkan. - Jika skema warna yang digunakan adalah
dark
, nilai warna kedua yang dihitung akan ditampilkan.
Baca selengkapnya di Warna yang bergantung pada skema warna CSS dengan light-dark() .
Screen Wake Lock API
Di Firefox 126, Screen Wake Lock API, fitur lain yang kini menjadi bagian dari Dasar Pengukuran yang Baru Tersedia, telah diluncurkan. API ini menyediakan cara untuk mencegah perangkat meredupkan dan mengunci layar.
Cari tahu cara menggunakan fitur ini di Tetap aktif dengan Screen Wake Lock API.
Compute Pressure API
Compute Pressure API menawarkan status tingkat tinggi yang mewakili beban CPU pada sistem. Hal ini memungkinkan implementasi menggunakan metrik hardware pokok yang tepat untuk memastikan bahwa pengguna dapat memanfaatkan semua daya pemrosesan yang tersedia selama sistem tidak mengalami tekanan yang tidak dapat dikelola.
Fitur ini tersedia di Chrome 125. Intel memimpin pekerjaan desain dan implementasi untuk API ini, yang akan memungkinkan aplikasi konferensi video menyeimbangkan fitur dan performa secara dinamis.
Baca dokumentasi untuk Compute Pressure API.
Aturan @starting-style
Safari 17.5 menyertakan aturan @starting-style
. Aturan at CSS ini memungkinkan Anda menerapkan gaya yang dapat dicari browser sebelum elemen dibuka di halaman, sesuai kebutuhan untuk animasi entri.
Aturan @starting-style
adalah salah satu fitur yang dibahas dalam
Empat fitur CSS baru untuk animasi masuk dan keluar yang lancar.
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 127 dan Chrome 126. Rilis ini menghadirkan banyak fitur hebat ke platform. Lihat catatan rilis untuk mengetahui semua detailnya. Berikut adalah beberapa sorotan.
Chrome 126 menyertakan transisi tampilan lintas dokumen untuk navigasi origin yang sama. Sebelumnya, Anda harus mendesain ulang situs ke SPA untuk menggunakan View Transitions API. Namun, sekarang sudah tidak seperti itu lagi. Transisi tampilan kini diaktifkan secara default untuk navigasi dengan origin yang sama. Anda dapat membuat transisi tampilan antara dua dokumen berbeda yang memiliki origin yang sama.
Firefox 127 menyertakan metode Set JavaScript tambahan—intersection()
, union()
, difference()
,
symmetricDifference()
,isSubsetOf()
, isSupersetOf()
, dan isDisjointFrom()
.