Baru menggunakan platform web pada bulan Juni

Temukan beberapa fitur menarik yang telah diluncurkan di browser web stabil dan beta selama Juni 2024.

Rilis browser stabil

Pada Juni 2024, Firefox 127 dan Chrome 126 menjadi stabil. Postingan ini membahas fitur baru yang ditambahkan ke platform web.

Metode Set JavaScript

Set adalah struktur data yang penting dalam bahasa pemrograman apa pun. Sekarang Anda dapat menggunakan metode bawaan JavaScript untuk melakukan operasi set. Metode set berikut kini tersedia dari Firefox 127, dan menjadi bagian dari Dasar Pengukuran yang Baru Tersedia:

Dukungan Browser

  • Chrome: 122.
  • Edge: 122.
  • Firefox: 127.
  • Safari: 17.

Sumber

Untuk mempelajari lebih lanjut, baca Metode Set JavaScript kini menjadi bagian dari Dasar Pengukuran.

Async Clipboard API

Clipboard API kini didukung sepenuhnya dari Firefox 127. Firefox kini mendukung antarmuka ClipboardItem, beserta metode read() dan write() antarmuka Clipboard. Pelajari Clipboard API lebih lanjut di Membatalkan pemblokiran akses papan klip.

Dukungan Browser

  • Chrome: 76.
  • Edge: 79.
  • Firefox: 127.
  • Safari: 13.1.

Sumber

Interpolasi warna dalam gradien CSS

Gradien CSS ditentukan untuk menerima <color-interpolation-method>, dan hal ini kini didukung di Firefox, sehingga dapat dioperasikan secara lintas-mesin utama. Sekarang Anda dapat, misalnya, menentukan linear-gradient() menggunakan sistem warna hsl dan interpolasi yang lebih lama.

.longer {
  background: linear-gradient(90deg in hsl longer hue, red, blue);
}

Dukungan Browser

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 127.
  • Safari: 16.2.

Transisi tampilan lintas dokumen

Sebelumnya, Anda harus mendesain ulang situs ke SPA untuk menggunakan View Transitions API. Namun, sekarang sudah tidak seperti itu lagi. Mulai Chrome 126, transisi tampilan kini diaktifkan secara default untuk navigasi dengan origin yang sama. Anda dapat membuat transisi tampilan antara dua dokumen dengan origin yang sama.

Untuk mengaktifkan transisi tampilan lintas dokumen, kedua ujung harus ikut serta. Untuk melakukannya, gunakan aturan at @view-transition dan tetapkan deskripsi navigasi ke auto.

@view-transition {
  navigation: auto;
}

Dukungan Browser

  • Chrome: 126.
  • Edge: 126.
  • Firefox: tidak didukung.
  • Pratinjau Teknologi Safari: didukung.

Pelajari lebih lanjut dalam dokumentasi untuk transisi tampilan lintas dokumen.

Ekstensi trigger-rumble Gamepad API

Chrome 126 memperluas antarmuka GamepadHapticActuator untuk mengekspos kemampuan trigger-rumble di web untuk gamepad yang kompatibel. Ekstensi ini akan memungkinkan aplikasi web yang memanfaatkan Gamepad API untuk juga menggetarkan pemicu perangkat gamepad yang dilengkapi dengan fungsi ini.

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 128, Chrome 127, Safari 18, dan Safari 17.6. Rilis ini menghadirkan banyak fitur hebat ke platform. Lihat catatan rilis untuk mengetahui semua detailnya. Berikut adalah beberapa sorotan.

Safari 17.6 adalah rilis perbaikan pada fitur yang sudah ada. Safari 18 memiliki sejumlah fitur baru yang menarik, termasuk kueri penampung gaya, API transisi tampilan untuk aplikasi satu halaman, dan dukungan untuk kata kunci safe dalam properti flexbox.

Chrome 127 menyertakan properti CSS font-size-adjust, kemampuan untuk menentukan teks alternatif pada konten yang dihasilkan sebagai jumlah elemen arbitrer, dan kemampuan untuk menambahkan informasi setiap bab di MediaMetaData.

Firefox 128 menyertakan Properti dan Nilai CSS, sehingga Dasar Pengukuran fitur ini Baru Tersedia. Gunakan @property untuk menentukan type dan menetapkan nilai penggantian untuk properti kustom CSS.