Baru menggunakan platform web pada bulan Mei

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

Rachel Andrew

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.

Penempatan anchor CSS

Chrome 125 menyertakan penempatan anchor CSS. Dengan cara ini, Anda dapat melakukan tethering elemen yang benar-benar diposisikan ke satu atau beberapa elemen lain di halaman (anchor), secara deklaratif, tanpa menggunakan JavaScript. Pemosisian anchor berfungsi secara optimal saat anchor dapat di-scroll. Kasus penggunaan yang umum adalah memosisikan popover seperti tooltip di samping elemen yang memanggilnya, atau menu pilihan dan daftar opsi popover-nya.

Pelajari lebih lanjut di Memperkenalkan API Positioning Anchor CSS.

Dukungan Browser

  • 125
  • 125
  • x
  • x

Sumber

Fungsi nilai yang dilangkah CSS—round(), mod(), dan rem()

Chrome 125 juga menyertakan fungsi nilai bertahap, yang berarti fungsi ini kini Baru Saja Tersedia Dasar Pengukuran. Fungsi nilai bertahap, round(), mod(), dan rem(), semuanya mentransformasikan nilai tertentu sesuai dengan "nilai langkah" lainnya.

Temukan selengkapnya di Fungsi matematika nilai yang dilangkah CSS kini tersedia di Dasar Pengukuran 2024.

Dukungan Browser

  • 125
  • 125
  • 118
  • 15,4

Sumber

Fungsi light-dark()

Selain itu, bergabung dengan Baseline Newly Available adalah fungsi warna CSS light-dark(), yang ada di Safari 17.5.

light-dark() adalah fungsi yang menerima dua argumen, 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 yang dihitung dari warna kedua akan ditampilkan.

Baca selengkapnya di warna yang bergantung pada skema warna CSS dengan gelap-terang() .

Dukungan Browser

  • 123
  • 123
  • 120
  • 17,5

Sumber

Screen Wake Lock API

Landing di Firefox 126 adalah Screen Wake Lock API, fitur lain yang kini menjadi bagian dari Baseline Baru Tersedia. API ini memberikan cara untuk mencegah perangkat meredupkan dan mengunci layar.

Cari tahu cara menggunakan fitur ini di Tetap terjaga dengan Screen Wake Lock API.

Dukungan Browser

  • 84
  • 84
  • 126
  • 16,4

Sumber

Compute Pressure API

Compute Pressure API menawarkan status level tinggi yang mewakili beban CPU pada sistem. Solusi ini memungkinkan implementasi menggunakan metrik hardware dasar yang tepat untuk memastikan pengguna dapat memanfaatkan semua daya pemrosesan yang tersedia selama sistem tidak berada dalam tekanan yang tidak terkendali.

Fitur ini ada 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.

Dukungan Browser

  • 125
  • 125
  • x
  • x

Sumber

Aturan @starting-style

Safari 17.5 menyertakan aturan @starting-style. CSS at-rule ini memungkinkan Anda menerapkan gaya yang dapat dicari browser sebelum elemen terbuka pada halaman, sesuai kebutuhan untuk animasi entri.

Aturan @starting-style adalah salah satu fitur yang tercakup dalam Empat fitur CSS baru untuk animasi masuk dan keluar yang lancar.

Dukungan Browser

  • 117
  • 117
  • x
  • 17,5

Sumber

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 127 dan Chrome 126. Rilis ini menghadirkan banyak fitur hebat ke platform ini. Lihat catatan rilis untuk semua detailnya. Berikut beberapa sorotan.

Chrome 126 menyertakan transisi tampilan lintas dokumen untuk navigasi origin yang sama. Sebelumnya, Anda harus merancang ulang situs menjadi SPA untuk menggunakan View Transitions API. Namun, sekarang sudah tidak seperti itu lagi. Transisi tampilan kini diaktifkan secara default untuk navigasi dari origin yang sama. Anda dapat membuat transisi tampilan antara dua dokumen berbeda yang merupakan asal yang sama.

Firefox 127 menyertakan metode Set JavaScript tambahan—intersection(), union(), difference(), symmetricDifference(),isSubsetOf(), isSupersetOf(), dan isDisjointFrom().