Baru di Chrome 105

Pete LePage

Berikut hal yang perlu Anda ketahui:

Saya Pete LePage. Mari selami dan lihat apa yang baru untuk pengembang di Chrome 105.

Kueri penampung dan properti CSS :has()

Kueri penampung, salah satu fitur yang paling banyak diminta akan tersedia di Chrome 105. Class ini memungkinkan developer membuat kueri pemilih induk untuk mengetahui informasi ukuran dan gaya, sehingga memungkinkan elemen turunan memiliki logika gaya visual responsifnya, di mana pun elemen tersebut berada di halaman.

Tampilan ini mirip dengan kueri @media, tetapi mengevaluasi berdasarkan ukuran penampung, bukan ukuran area pandang.

Kueri penampung vs kueri media.

Untuk menggunakan kueri penampung, Anda perlu menetapkan pembatasan pada elemen induk. Misalnya, Anda mungkin memiliki kartu yang berisi gambar dan beberapa teks.

Kartu dua kolom tunggal.

Untuk membuat kueri penampung, tetapkan container-type pada penampung kartu. Menyetel container-type ke inline-size akan mengkueri ukuran inline-direction induk.

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

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;
  }
}

Dalam hal ini, jika penampung kurang dari 400 piksel, penampung akan beralih ke tata letak kolom tunggal.

Pseudo-class :has() CSS

Kita dapat mengambil langkah lebih jauh dengan pseudo-class :has() CSS. Hal ini memungkinkan Anda memeriksa apakah elemen induk berisi turunan dengan parameter tertentu.

Misalnya, p:has(span) menunjukkan pemilih paragraf dengan span di dalamnya. Anda dapat menggunakannya untuk menata gaya paragraf induk itu sendiri, atau apa pun di dalamnya. Atau, Anda dapat menggunakan figure:has(figcaption) untuk menata gaya elemen gambar yang berisi teks.

p:has(span) {
  /* magic styles */
}

figure:has(figcaption) {
  /* this figure has a figcaption */
}

Baca artikel Una @container and :has(): dua API responsif baru yang andal untuk penjelasan yang lebih mendetail dan beberapa demo menarik.

API Sanitizer

Sebagian besar aplikasi web sering menangani string yang tidak tepercaya, tetapi merender konten tersebut dengan aman bisa merepotkan. Tanpa kehati-hatian yang memadai, sangat mudah untuk secara tidak sengaja menciptakan peluang untuk kerentanan skrip lintas situs.

Ada library seperti DomPurify yang dapat membantu, tetapi menambah sedikit beban pemeliharaan. HTML Sanitizer API membantu mengurangi jumlah kerentanan pembuatan skrip lintas situs dengan membangun sanitasi ke dalam platform.

Untuk menggunakannya, buat instance Sanitizer baru. Kemudian, panggil setHTML() di elemen tempat Anda ingin memasukkan konten bersih.

const mySanitizer = new Sanitizer();
const user_input = `<img src="" onerror=alert(0)>`;
elem.setHTML(user_input, { sanitizer: mySanitizer });

Sanitizer API dirancang agar aman secara default dan dapat disesuaikan, sehingga Anda dapat menentukan opsi konfigurasi yang berbeda, misalnya menghapus elemen tertentu, atau mengizinkan elemen lainnya.

const config = {
  allowElements: [],
  blockElements: [],
  dropElements: [],
  allowAttributes: {},
  dropAttributes: {},
  allowCustomElements: true,
  allowComments: true
};
// sanitized result is customized by configuration
const mySanitizer = new Sanitizer(config);

Lihat Manipulasi DOM Aman dengan Sanitizer API untuk mengetahui detail selengkapnya.

Menghentikan penggunaan Web SQL untuk konteks yang tidak aman

Beberapa waktu yang lalu, kami mengumumkan rencana untuk menghentikan penggunaan Web SQL. Mulai Chrome 105, Web SQL tidak akan digunakan lagi dalam konteks yang tidak aman.

Jika menggunakan Web SQL dalam konteks yang tidak aman, Anda harus bermigrasi ke IndexDB, atau penampung penyimpanan lokal lainnya sesegera mungkin.

Dan banyak lagi!

Tentu saja masih banyak lagi.

  • Anda kini dapat memperbarui nama PWA yang diinstal di desktop dan seluler dengan memperbarui manifes aplikasi web.
  • API penempatan jendela multilayar mendapatkan label nama layar yang akurat.
  • API overlay kontrol jendela kini tersedia. Ini memungkinkan PWA memberikan nuansa yang lebih mirip aplikasi dengan menukar panel judul lebar penuh yang ada dengan overlay kecil. Hal ini memungkinkan Anda menempatkan konten kustom di area kolom judul.

Bacaan lebih lanjut

Artikel ini hanya mencakup beberapa sorotan utama. Periksa link di bawah untuk melihat perubahan tambahan di Chrome 105.

Langganan

Untuk terus mengikuti info terbaru, subscribe ke channel YouTube Chrome Developers, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

Saya Pete LePage, dan segera setelah Chrome 106 dirilis, kami akan ada di sini untuk memberi tahu Anda apa yang baru di Chrome!