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 untuk platform web.

Animasi trek petak

Berkat karya kontributor kami di Microsoft, Chrome kini dapat menginterpolasi nilai grid-template-columns dan grid-template-rows. Ini berarti bahwa tata letak petak dapat bertransisi dengan lancar antar-status, alih-alih mengepaskan pada titik tengah animasi atau transisi.

Penambahan ke getDisplayMedia()

Selain itu, Chrome memiliki beberapa tambahan pada getDisplayMedia() yang bertujuan untuk mencegah berbagi layar secara 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. Tindakan ini akan 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.

Pengujian untuk dukungan teknologi font dan fitur 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 fragmen scroll ke teks yang menambahkan dukungan untuk menavigasi ke URL dengan fragmen teks tertentu yang ditentukan.

Dukungan AVIF

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

Web Push untuk Safari

Safari 16.1 menghadirkan dukungan Web Push ke Safari di macOS Ventura. Menggunakan Push API dan Notifications API, Anda dapat membaca selengkapnya di artikel Meet Web Push. Halaman landing Web Push di Safari berarti bahwa kini tersedia di ketiga mesin utama.

Rilis browser beta

Versi browser beta memberikan pratinjau dari hal-hal yang akan ada dalam versi browser stabil berikutnya. Ini adalah waktu yang tepat untuk menguji fitur baru, atau penghapusan, yang dapat memengaruhi situs Anda sebelum dunia merilisnya. 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 agar tidak rusak sebelum, setelah, atau di dalam elemen yang diterapkan. Misalnya, CSS berikut mencegah gambar rusak pada batas halaman.

figure {
    break-inside: avoid;
}

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

Terdapat perubahan pada cara kerja Viewport Tata Letak di Chrome pada Android saat keyboard virtual ditampilkan. Baca Mempersiapkan perubahan perilaku perubahan ukuran area pandang yang akan hadir pada Chrome di Android untuk mempelajari lebih lanjut dan mengetahui cara mempersiapkan pengiriman ini ke stabil bulan depan.

Selain itu, di Chrome terdapat Unit Viewport CSS yang baru. Unit tersebut termasuk 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, pada font, Chrome 108 menambahkan dukungan untuk fungsi font-tech() dan font-format() guna menampilkan kueri dengan @supports.

Firefox juga menambahkan dukungan contain-intrinsic-size, yang menggabungkan Chrome untuk membuat dua browser yang mendukung fitur ini.

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

Bagian dari serial Baru di web