Baru menggunakan platform web pada bulan Juli

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

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);
}

Browser Support

  • Chrome: 119.
  • Edge: 119.
  • Firefox: 128.
  • Safari: 18.

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.

Browser Support

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 128.
  • Safari: 17.4.

Update di Chrome 127 memastikan bahwa Chrome menerima sejumlah elemen arbitrer, bukan hanya satu string, sehingga 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.

Browser Support

  • Chrome: 127.
  • Edge: 127.
  • Firefox: 3.
  • Safari: 16.4.

Source

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

Dukungan untuk View Transition API di iframe

Mulai Chrome 127, transisi tampilan dokumen yang sama secara serentak dalam frame utama dan iframe dengan 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 dieksekusi.

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 di 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.

Browser Support

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 128.
  • Safari: 16.4.

Source

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.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 128.
  • Safari: 16.4.

Source

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.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: 63.
  • Safari: 17.6.

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 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 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. Ada pembaruan 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.