Baru menggunakan platform web pada bulan Juli

Temukan beberapa fitur menarik yang telah hadir di browser web stabil dan beta pada 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, yang memungkinkan Anda membuat warna relatif terhadap warna asal. CSS berikut mendesaturasi warna indigo sebanyak setengah, menggunakan hsl().

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

Anda dapat menemukan lebih banyak contoh di postingan blog Sintaksis warna relatif CSS. Sintaksis warna relatif adalah salah satu area fokus untuk Interop 2024, sehingga update 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 ditampilkan ke hierarki aksesibilitas. Artinya, teks alternatif kini didukung oleh semua browser untuk content.

Update di Chrome 127 memastikan bahwa Chrome menerima elemen dalam jumlah arbitrer, bukan hanya satu string, yang memungkinkan penggunaan fungsi attr(), misalnya.

Properti font-size-adjust

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

Dengan rilis Chrome ini, properti font-size-adjust menjadi bagian dari Baseline 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 di iframe dengan origin yang sama tidak akan berfungsi jika frame utama menjalankan transisi secara bersamaan. Transisi iframe akan otomatis dilewati. Sekarang, kedua transisi akan dijalankan.

Penampung scroll yang dapat difokuskan keyboard

Mulai Chrome 127, scroller dapat difokuskan dengan klik dan dapat difokuskan secara terprogram secara default. Scroller tanpa turunan yang dapat difokuskan secara default dapat difokuskan oleh keyboard.

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

Aturan @property

Firefox 128 menyertakan dukungan untuk aturan @property dan API JavaScript terkait. Artinya, Anda dapat membuat properti kustom CSS yang menentukan sintaksis, pewarisan, dan nilai awal.

Dalam contoh berikut, properti kustom ditentukan untuk hanya menerima nilai <color>, 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 diperluas

ArrayBuffer yang dapat diubah ukurannya dan SharedArrayBuffer yang dapat diperluas kini didukung di Firefox 128, sehingga ukuran buffering dapat diubah tanpa harus mengalokasikan buffer baru dan menyalin data ke dalamnya. Properti ini juga bergabung dengan Dasar Pengukuran yang Baru Tersedia.

Kata kunci safe dalam properti flexbox

Safari 17.6 sebagian besar adalah rilis perbaikan untuk fitur yang ada, tetapi juga menyertakan kata kunci safe untuk properti perataan flexbox. Hal ini membuat kata kunci safe dapat dioperasikan secara lintas browser.

Kata kunci safe mencegah perataan yang dipilih agar tidak menyebabkan konten ditampilkan di luar area yang dapat dilihat. CodePen berikut menunjukkan cara ini berfungsi dengan item yang disejajarkan di tengah. Jika perataan center menyebabkan hilangnya data, start akan digunakan sebagai gantinya.

Rilis browser beta

Versi browser Beta memberi Anda pratinjau hal-hal yang akan ada di versi browser 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 yang baru adalah Firefox 129 dan Chrome 128. 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.

Chrome 128 menyertakan properti ruby-align CSS, beserta perubahan untuk memungkinkan pemisahan baris dalam elemen yang memiliki display: ruby, properti zoom juga telah diperbarui agar sesuai dengan spesifikasi. Terdapat update pada AudioContext API untuk menambahkan callback yang ditetapkan ke AudiContext.onerror, yang melaporkan error pembuatan dan rendering AudioContext.

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