Temukan beberapa fitur menarik yang diluncurkan di browser web stabil dan beta selama November 2022.
Rilis browser stabil
Pada bulan November, Firefox 107, dan Chrome 108 menjadi stabil. Mari kita lihat apa artinya ini bagi platform web.
Perubahan pada perilaku Layout Viewport di Chrome di Android
Ada perubahan pada perilaku Layout Viewport dari Chrome 108 di Android saat keyboard virtual ditampilkan. Baca Bersiap menghadapi perubahan perilaku pengubahan ukuran area pandang yang akan hadir di Chrome di Android untuk mempelajari lebih lanjut.
Unit area pandang baru
Di Chrome 108 juga terdapat Unit Viewport CSS 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 diimplementasikan di Firefox dan Safari, yang berarti kita sekarang memiliki interop di tiga mesin browser utama untuk unit ini.
Baca Unit area pandang besar, kecil, dan dinamis.
Dukungan Browser
Properti CSS singkatan contain-intrinsic-size
didukung di Firefox 107, bersama dengan contain-intrinsic-width
, contain-intrinsic-height
panjang dan properti logis contain-intrinsic-block-size
dan contain-intrinsic-inline-size
.
Ini diterapkan untuk menentukan ukuran elemen UI yang tunduk pada pembatasan ukuran. Hal ini memungkinkan agen pengguna menentukan ukuran elemen tanpa perlu merender elemen turunannya. Fungsi ini berguna saat elemen tunduk pada pembatasan ukuran.
Dukungan untuk kata kunci avoid
fragmentasi CSS
Chrome 108 menyertakan dukungan untuk nilai avoid
dari 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;
}
Penambahan ini disebabkan oleh penyertaan dukungan cetak menggunakan LayoutNG, yang memberikan pengalaman modern dan lebih sedikit bug. Pelajari LayoutNG lebih lanjut.
Federated Credential Management API
Federated Credential Management API (FedCM) menyediakan abstraksi untuk alur identitas gabungan di web. API ini mengekspos dialog yang dimediasi browser yang memungkinkan pengguna memilih akun dari penyedia identitas untuk login ke situs. FedCM dikirimkan di Chrome 108. Cari tahu selengkapnya di postingan blog pengumuman FedCM.
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. Karena tanggal rilisnya, satu-satunya versi beta baru bulan ini adalah Firefox 108, dengan Safari 16.2 beta yang masih berlangsung.
Firefox 108 mendukung atribut height
dan width
untuk elemen <source>
, jika merupakan turunan dari elemen <picture>
. Atribut ini menerima tinggi atau lebar gambar, dalam piksel, sebagai bilangan bulat tanpa satuan.
Implementasi kueri penampung sedang berlangsung di Firefox. Di balik tanda layout.css.container-queries.enabled
di Firefox 108 beta, Anda akan menemukan unit panjang kueri penampung—cqw
, cqh
, cqi
, cqb
, cqmin
, cqmax
. Ini adalah satuan panjang yang relatif terhadap ukuran penampung kueri.
Bagian dari serial Baru di web