Temukan beberapa fitur menarik yang tersedia di browser web stabil dan beta selama Oktober 2022.
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.
Dukungan Browser
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