Temukan beberapa fitur menarik yang tersedia di browser web stabil dan beta selama Agustus 2022.
Rilis browser stabil
Pada bulan Agustus, Firefox 104, Chrome 104, dan Chrome 105 menjadi stabil.
Transformasi individual
Chrome 104 menyertakan properti individual untuk Transformasi CSS. Propertinya adalah scale, rotate, dan translate, yang dapat Anda gunakan untuk menentukan bagian transformasi tersebut satu per satu.
Dengan demikian, Chrome akan bergabung dengan Firefox dan Safari yang sudah mendukung properti ini.
Sintaksis kueri media baru
Chrome 104 juga menyertakan sintaksis rentang kueri media. Ini telah dikirimkan oleh Firefox, dan membantu menyederhanakan kueri media. Misalnya, kueri media berikut:
@media (min-width: 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}
Dapat ditulis menggunakan operator perbandingan:
@media (width >= 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}
Kueri penampung
Chrome 105 adalah rilis menarik yang menghadirkan fitur kueri container yang telah lama dinantikan ke platform web. Sementara kueri media memberi Anda cara untuk membuat kueri terhadap ukuran area pandang, kueri penampung menyediakan metode kueri terhadap ukuran penampung.
Untuk menggunakan kueri container, aktifkan pembatasan menggunakan properti container-type.
.card-container {
container-type: inline-size;
}
Menyetel container-type ke inline-size akan membuat kueri ukuran arah inline induk. Dalam bahasa latin seperti bahasa Inggris, ini adalah lebar kartu, karena teks mengalir sejajar dari kiri ke kanan.
Sekarang, kita dapat menggunakan penampung tersebut untuk menerapkan gaya ke salah satu turunannya menggunakan @container:
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card {
grid-template-columns: 1fr;
}
}
Anda dapat mengetahui lebih lanjut kueri penampung di postingan @container and :has(): dua API responsif baru yang efektif di Chromium 105.
Kelas semu induk :has()
Postingan yang disebutkan di atas juga menyebutkan :has(). Kelas semu baru ini Kelas semu CSS :has() memberi Anda cara untuk menargetkan elemen induk dan elemen seinduk berdasarkan kondisi. Pelajari lebih lanjut di :has() pemilih keluarga.
API Sanitizer
Selain itu, di Chrome 105 terdapat Sanitizer API. API ini membangun sanitasi ke dalam platform untuk membantu menghapus kerentanan pembuatan skrip lintas situs.
Selain itu, di Chrome 105 terdapat pseudo-class CSS :modal. Elemen ini mencocokkan elemen yang berada dalam status yang mengecualikan semua interaksi dengan elemen di luarnya. Misalnya, <dialog> dibuka dengan showModal() API.
Metode findLast() dan findLastIndex()
Firefox 104 menambahkan dukungan di balik flag untuk metode Array.prototype.findLast(), Array.prototype.findLastIndex(), TypedArray.prototype.findLast(), dan TypedArray.prototype.findLastIndex(). Keduanya digunakan untuk menemukan nilai dan indeks elemen terakhir dalam Array atau Typed.Array yang cocok dengan fungsi pengujian yang disediakan.
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.
Karena tanggal rilis jatuh di luar bulan, satu-satunya versi beta baru pada bulan Agustus adalah Firefox 105, yang saat ini hanya tersedia sedikit panduan.
Safari 16 beta yang disebutkan pada bulan Juni juga masih berlangsung.
Bagian dari serial Baru di web