Baru menggunakan platform web pada bulan Juli

Temukan beberapa fitur menarik yang telah hadir di versi stabil dan beta browser web selama Juli 2024.

Rachel Andrew

Rilis browser stabil

Pada Juli 2024, Firefox 128, Safari 17.6, dan Chrome 127 menjadi stabil. Postingan ini membahas fitur baru yang ditambahkan ke platform web.

Sintaksis warna relatif CSS

Firefox 128 menyertakan Sintaksis warna relatif CSS, ini memungkinkan Anda membuat warna yang relatif terhadap warna asal. CSS berikut menurunkan saturasi warna indigo menjadi setengahnya, menggunakan hsl().

.desaturate-by-half {
  background: hsl(from indigo h calc(s / 2) l);
}

Dukungan Browser

  • 119
  • 119
  • 128
  • 16,4

Anda dapat menemukan banyak contoh lainnya di postingan blog Sintaksis warna relatif CSS. Sintaksis warna relatif adalah salah satu area fokus untuk Interop 2024, sehingga pembaruan ini membantu meningkatkan skor untuk Firefox yang stabil.

Teks alternatif untuk properti content

Firefox 128 mendukung teks alternatif untuk properti content CSS, jika menyertakan gambar. Teks alternatif diekspos ke hierarki aksesibilitas. Ini berarti teks alternatif sekarang didukung oleh semua browser untuk content.

Dukungan Browser

  • 77
  • 79
  • 128
  • 17,4

Update di Chrome 127 memastikan bahwa Chrome menerima bukan hanya satu string, yang memungkinkan penggunaan attr() {i>function<i}, misalnya.

Properti font-size-adjust

Chrome 127 menyertakan font-size-adjust, yang juga merupakan area fokus untuk Interop 2024. Properti ini berguna untuk situasi di mana penggantian font dapat terjadi, karena membantu Anda mencocokkan ukuran font pengganti dengan font pilihan pertama.

Dukungan Browser

  • 127
  • 127
  • 3
  • 16,4

Sumber

Dengan rilis Chrome ini, properti font-size-adjust menjadi bagian dari Dasar Pengukuran Baru Tersedia.

Dukungan untuk View Transition API di iframe

Dari Chrome 127, transisi tampilan dokumen yang sama serentak dalam frame utama dan iframe origin yang sama akan tersedia.

Sebelumnya, menjalankan transisi tampilan menggunakan document.startViewTransition dalam iframe origin yang sama tidak akan berfungsi jika frame utama menjalankan transisi secara bersamaan. Transisi iframe akan dilewati secara otomatis. Sekarang, kedua transisi akan dijalankan.

Penampung scroll yang dapat difokuskan keyboard

Dari Chrome 127, scroller dapat difokuskan klik dan dapat difokuskan secara terprogram secara {i>default<i}. Scroller tanpa turunan yang dapat difokuskan secara default dapat difokuskan keyboard.

Pelajari perubahan ini lebih lanjut di postingan Scroller yang dapat difokuskan keyboard.

Aturan @property

Firefox 128 menyertakan dukungan untuk aturan @property dan JavaScript terkait Google Cloud Platform. Ini berarti Anda dapat membuat properti khusus CSS yang menentukan sintaks, pewarisan, dan nilai awal.

Dukungan Browser

  • 85
  • 85
  • 128
  • 16,4

Sumber

Pada contoh berikut, properti khusus ditentukan untuk menerima <color> nilai saja, tidak mewarisi, dan memiliki nilai awal hotpink.

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

Aturan @property kini menjadi bagian dari Dasar Pengukuran yang Baru Tersedia, baca selengkapnya di @property: Variabel CSS generasi berikutnya kini dengan dukungan browser universal.

ArrayBuffer yang dapat diubah ukurannya dan SharedArrayBuffer yang dapat ditumbuhkan

Dapat diubah ukurannya ArrayBuffer dan dapat dikembangkan SharedArrayBuffer kini didukung di Firefox 128, yang memungkinkan ukuran {i>buffer<i} diubah tanpa harus mengalokasikan {i>buffer<i} baru dan menyalin data ke dalamnya. Properti ini juga bergabung dengan Dasar Pengukuran yang Baru Tersedia.

Dukungan Browser

  • 111
  • 111
  • 128
  • 16,4

Sumber

Kata kunci safe di properti flexbox

Safari 17.6 sebagian besar adalah rilis perbaikan untuk fitur yang ada, tetapi ini juga menyertakan kata kunci safe untuk properti perataan flexbox. Ini membuat kata kunci safe dapat dioperasikan bersama di seluruh browser.

Dukungan Browser

  • 115
  • 115
  • 63
  • 18

Kata kunci safe mencegah penyelarasan yang dipilih menyebabkan konten ditampilkan di luar area pandang. CodePen berikut menunjukkan cara kerjanya dengan item rata tengah. Jika penyelarasan center menyebabkan kehilangan data, start digunakan sebagai gantinya.

Rilis browser beta

Versi browser beta memberi Anda pratinjau tentang hal-hal yang akan ada versi stabil dari browser. Ini adalah saat yang tepat untuk menguji fitur baru, atau penghapusan, yang dapat memengaruhi situs Anda sebelum dunia mendapatkan rilis tersebut. Baru beta adalah Firefox 129 dan Chrome 128. Tujuan Safari 18 beta masih berlangsung. Rilis ini menghadirkan banyak fitur hebat ke platform. Lihat rilisnya catatan untuk semua detail. Berikut adalah beberapa sorotan.

Chrome 128 menyertakan properti ruby-align CSS, bersama dengan perubahan pada buat pemisah baris di dalam elemen yang memiliki display: ruby, Properti zoom juga telah diupdate agar sesuai dengan spesifikasi. Ada update pada API AudioContext untuk menambahkan callback yang ditetapkan ke AudiContext.onerror, yang melaporkan error pembuatan dan rendering AudioContext.

Firefox 129 menyertakan aturan @starting-style dan transition-behavior saat ini. Properti ini akan menjadi bagian dari Dasar Pengukuran yang Baru Tersedia satu kali Firefox 129 dirilis ke versi stabil.