Baru menggunakan platform web pada bulan Oktober

Temukan beberapa fitur menarik yang tersedia di browser web stabil dan beta selama Oktober 2022.

Rachel Andrew

Rilis browser stabil

Pada bulan Oktober, Firefox 106, Chrome 107, dan Safari 16.1 menjadi stabil. Mari kita lihat apa artinya ini bagi platform web.

Animasi trek petak

Berkat kerja keras kontributor kami di Microsoft, Chrome kini dapat melakukan interpolasi nilai grid-template-columns dan grid-template-rows. Artinya, tata letak petak dapat bertransisi dengan lancar di antara status, bukan snap di titik tengah animasi atau transisi.

Arahkan kursor ke avatar untuk melihat animasi. Contoh ini berasal dari artikel Tata letak petak animasi CSS, tempat Anda dapat mengetahui lebih lanjut.

Dukungan Browser

  • Chrome: 107.
  • Edge: 107.
  • Firefox: 66.
  • Safari: 16.

Penambahan ke getDisplayMedia()

Selain itu, di Chrome ada beberapa tambahan pada getDisplayMedia() yang bertujuan mencegah berbagi layar yang berlebihan yang tidak disengaja saat berbagi layar.

  • Opsi displaySurface dapat menunjukkan bahwa aplikasi web lebih memilih untuk menawarkan jenis platform tampilan tertentu (tab, jendela, atau layar).
  • Opsi surfaceSwitching menunjukkan apakah Chrome harus mengizinkan pengguna untuk beralih antar-tab bersama secara dinamis.
  • Opsi selfBrowserSurface dapat digunakan untuk mencegah pengguna membagikan tab saat ini. Hal ini menghindari efek "hall of mirrors".
  • Opsi systemAudio memastikan Chrome hanya menawarkan perekaman audio yang relevan kepada pengguna.

Safari 16.1 juga menyertakan dukungan untuk getDisplayMedia, yang menambahkan dukungan untuk merekam jendela Safari tertentu.

Menguji dukungan teknologi dan fitur font dari CSS

Firefox telah menambahkan fungsi font-tech() dan font-format() untuk menampilkan kueri dengan @supports. Contoh berikut menguji dukungan font COLRv1.

@supports font-tech(color-COLRv1) {

}

Anda dapat menemukan contoh lainnya di MDN.

Scroll ke fragmen teks

Safari 16.1 menyertakan dukungan untuk scroll ke fragmen teks yang menambahkan dukungan untuk membuka URL dengan fragmen teks tertentu yang ditentukan.

Dukungan AVIF

Safari 16 menyertakan dukungan untuk gambar AVIF diam, Safari 16.1 menyertakan dukungan untuk gambar AVIF animasi di macOS Ventura, iOS 16, dan iPadOS 16.

Web Push untuk Safari

Safari 16.1 menghadirkan dukungan Web Push ke Safari di macOS Ventura. Fitur ini menggunakan Push API dan Notifications API. Anda dapat membaca hal ini selengkapnya di artikel Web Push Meet. Landing Web Push di Safari berarti fitur ini kini tersedia di ketiga mesin utama.

Rilis browser beta

Versi browser beta memberi Anda pratinjau hal-hal yang akan ada di versi stabil browser 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 bulan ini adalah Chrome 108, Firefox 107, dan Safari 16.2.

Chrome 108 menyertakan dukungan untuk nilai avoid properti fragmentasi CSS break-before, break-after, dan break-inside saat mencetak. Nilai ini memberi tahu browser untuk menghindari pemutusan sebelum, sesudah, atau di dalam elemen tempatnya diterapkan. Misalnya, CSS berikut menghindari gambar yang terputus pada batas halaman.

figure {
    break-inside: avoid;
}

Chrome 108 mulai meluncurkan perubahan pada perilaku overflow pada elemen yang diganti, yang dapat menyebabkan perubahan visual dalam beberapa situasi. Baca artikel Perubahan pada penambahan elemen yang diganti di CSS untuk mengetahui detail selengkapnya dan melihat cara mengatasi masalah yang Anda temukan.

Ada perubahan pada perilaku Viewport Tata Letak di Chrome pada Android saat keyboard virtual ditampilkan. Baca Bersiaplah untuk perubahan perilaku pengubahan ukuran area pandang yang akan hadir di Chrome di Android untuk mempelajari lebih lanjut dan mengetahui cara mempersiapkan peluncuran ini ke versi stabil bulan depan.

Selain itu, di Chrome terdapat Unit Area Pandang CSS yang baru. Ini mencakup unit kecil (svw, svh, svi, svb, svmin, svmax), besar (lvw, lvh, lvi, lvb, lvmin, lvmax), dinamis (dvw, dvh, dvi, dvb, dvmin, dvmax), dan logis (vi, vb). Unit ini sudah diterapkan di Firefox dan Safari.

Firefox 107 mengaktifkan dukungan font COLRv1, bergabung dengan Chrome dalam mendukung teknologi font ini. Selain itu, di font, Chrome 108 menambahkan dukungan untuk fungsi font-tech() dan font-format() untuk menampilkan kueri dengan @supports.

Firefox juga menambahkan dukungan contain-intrinsic-size, bergabung dengan Chrome untuk membuat dua browser dengan dukungan untuk fitur ini.

Safari 16.2 Beta menyertakan banyak perbaikan CSS, termasuk ukuran dan snap scroll.

Bagian dari serial Baru di web