Baru menggunakan platform web pada bulan Agustus

Temukan beberapa fitur menarik yang diluncurkan di browser web stabil dan beta selama Agustus 2022.

Rachel Andrew

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 bergabung dengan Firefox dan Safari yang sudah mendukung properti ini.

Dukungan Browser

• 104
• 104
• 72
• 14.1

Sumber

Sintaksis kueri media baru

Chrome 104 juga menyertakan sintaksis rentang kueri media. Ini telah diluncurkan 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.
}

Dukungan Browser

• 104
• 104
• 102
• 16.4

Sumber

Kueri penampung

Chrome 105 adalah rilis menarik yang menghadirkan fitur kueri penampung yang telah lama ditunggu ke platform web. Meskipun kueri media memberi Anda cara untuk membuat kueri berdasarkan ukuran area pandang, kueri penampung memberikan metode untuk membuat kueri berdasarkan ukuran penampung.

Dukungan Browser

• 105
• 105
• 110
• 16

Sumber

Untuk menggunakan kueri penampung, aktifkan pembatasan menggunakan properti container-type.

.card-container {
  container-type: inline-size;
}

Menetapkan container-type ke inline-size akan mengkueri ukuran arah inline induk. Dalam bahasa latin seperti bahasa Inggris, ini akan menjadi lebar kartu, karena teks mengalir secara inline dari kiri ke kanan.

Sekarang, kita dapat menggunakan penampung tersebut untuk menerapkan gaya ke 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 dan :has(): dua API responsif baru yang canggih yang hadir di Chromium 105.

Pseudo-class induk :has()

Postingan yang disebutkan di atas juga menyebutkan :has(). Pseudoclass baru ini Pseudoclass :has() CSS memberi Anda cara untuk menargetkan elemen induk dan saudara berdasarkan kondisi. Pelajari lebih lanjut di :has() pemilih keluarga.

Dukungan Browser

• 105
• 105
• 121
• 15.4

Sumber

Sanitizer API

Sanitizer API juga tersedia di Chrome 105. API ini membangun sanitasi ke dalam platform untuk membantu menghilangkan kerentanan pembuatan skrip lintas situs.

Di Chrome 105 juga terdapat pseudo-class CSS :modal. Ini cocok dengan elemen yang berada dalam status yang mengecualikan semua interaksi dengan elemen di luarnya. Misalnya, <dialog> yang dibuka dengan showModal() API.

Dukungan Browser

• 105
• 105
• 103
• 15.6

Sumber

Metode findLast() dan findLastIndex()

Firefox 104 menambahkan dukungan di balik tanda untuk metode Array.prototype.findLast(), Array.prototype.findLastIndex(), TypedArray.prototype.findLast(), dan TypedArray.prototype.findLastIndex(). Metode ini digunakan untuk menemukan nilai dan indeks (masing-masing) elemen terakhir dalam Array atau TypedArray yang cocok dengan fungsi pengujian yang disediakan.

Dukungan Browser

• 97
• 97
• 104
• 15,4

Sumber

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.

Karena tanggal rilisnya berada di luar bulan ini, satu-satunya versi beta baru pada bulan Agustus adalah Firefox 105, yang saat ini tidak memiliki detail lengkap.

Safari 16 beta yang disebutkan pada bulan Juni juga masih berlangsung.

Bagian dari serial Baru di web