Baru di Chrome 105

Pete LePage

Berikut hal yang perlu Anda ketahui:

Saya Pete LePage. Mari kita pelajari dan lihat apa yang baru untuk developer di Chrome 105.

Kueri penampung dan properti CSS :has()

Kueri kontainer, salah satu fitur yang paling banyak diminta adalah Chrome 105. Mereka memungkinkan pengembang untuk meng-kueri pemilih induk untuk ukurannya dan informasi gaya visual, yang memungkinkan elemen turunan memiliki logika gaya visual responsif, di mana pun ia berada di suatu halaman.

Mereka mirip dengan kueri @media, kecuali mereka mengevaluasi berdasarkan ukuran kontainer, bukan ukuran area pandang.

Kueri penampung vs kueri media.

Untuk menggunakan kueri penampung, Anda harus 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. Menetapkan container-type ke inline-size akan mengkueri inline-direction ukuran induk.

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

Sekarang, kita bisa 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;
  }
}

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

Class semu :has() CSS

Kita dapat melangkah lebih jauh dengan class semu :has() CSS. Ini memungkinkan Anda memeriksa apakah elemen induk berisi turunan dengan parameter.

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

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

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

Lihat artikel Una @container dan :has(): dua API responsif baru yang canggih untuk penjelasan lebih rinci dan beberapa demo menarik.

API Sanitizer

Sebagian besar aplikasi web sering menangani string yang tidak dipercaya, tetapi merendernya dengan aman bisa menjadi hal yang rumit. Tanpa perawatan yang cukup, Anda bisa secara tidak sengaja menciptakan peluang kerentanan pembuatan skrip lintas situs.

Ada library seperti DomPurify yang membantu, tapi tambahkan dan beban pemeliharaan yang berat. HTML Sanitizer API membantu mengurangi jumlah kerentanan {i>scripting<i} lintas situs dengan melakukan sanitasi ke dalam platform.

Untuk menggunakannya, buat instance baru Sanitizer. Lalu, panggil setHTML() di elemen tempat Anda ingin memasukkan konten yang 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, memungkinkan Anda untuk menentukan opsi konfigurasi yang berbeda, misalnya melepaskan elemen tertentu, atau mengizinkan yang lain.

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.

Penghentian penggunaan Web SQL untuk konteks yang tidak aman

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

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

Dan banyak lagi!

Tentu saja masih banyak lagi.

  • Anda kini dapat memperbarui nama PWA terinstal di desktop dan perangkat seluler dengan memperbarui manifes aplikasi web.
  • API penempatan jendela multilayar mendapatkan label nama layar yang akurat.
  • API overlay kontrol jendela kini tersedia. Hal ini memungkinkan PWA menyediakan lebih mirip aplikasi dengan menukar bilah judul lebar penuh yang ada dengan overlay kecil. Dengan begitu, Anda dapat menempatkan konten kustom di area kolom judul.

Bacaan lebih lanjut

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

Langganan

Untuk mendapatkan info terbaru, berlangganan Channel YouTube Developer Chrome, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

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