Kueri container dan :has() sangat cocok dengan platform responsif. Untungnya, kedua fitur ini tersedia di Chromium 105. Ini adalah rilis besar dengan dua fitur yang paling banyak diminta untuk antarmuka responsif.
Kueri Penampung: ringkasan singkat
Kueri penampung memungkinkan developer membuat kueri pemilih induk untuk informasi gaya dan ukuran, sehingga memungkinkan elemen turunan memiliki logika gaya visual yang responsif, di mana pun elemen tersebut berada di halaman web.
Developer kini juga dapat melakukan kueri ukuran elemen dalam halaman, alih-alih mengandalkan area pandang untuk input gaya seperti ruang yang tersedia. Kemampuan ini berarti bahwa komponen memiliki logika gaya visual responsifnya. Hal ini membuat komponen jauh lebih tangguh, karena logika gaya visual melekat padanya, di mana pun ia muncul di halaman.
Menggunakan kueri penampung
Untuk membuat build dengan kueri container, Anda harus menetapkan pembatasan pada elemen induk terlebih dahulu. Lakukan ini dengan menetapkan container-type di penampung induk. Anda mungkin memiliki kartu dengan gambar dan beberapa konten teks yang terlihat seperti ini:
Untuk membuat kueri penampung, tetapkan container-type pada penampung kartu:
.card-container {
container-type: inline-size;
}
Menetapkan container-type ke inline-size akan membuat kueri ukuran arah inline induk. Dalam bahasa latin seperti bahasa Inggris, ini akan menjadi lebar kartu, karena teks mengalir 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;
}
}
Pemilih induk :has()
Class semu :has() CSS memungkinkan developer memeriksa apakah elemen induk berisi turunan dengan parameter tertentu.
Misalnya, p:has(span) menunjukkan pemilih paragraf (p), yang memiliki span di dalamnya. Anda dapat menggunakan ini untuk menata gaya paragraf induk itu sendiri, atau menata gaya apa pun di dalamnya. Salah satu contoh yang berguna adalah figure:has(figcaption) untuk menata gaya elemen figure yang berisi teks. Anda dapat melihat informasi selengkapnya tentang :has() di artikel oleh Jhey Tompkins ini.
Kueri container dan :has()
Anda dapat menggabungkan kekuatan pemilihan induk :has() dengan kekuatan kueri induk dari kueri container untuk membuat beberapa gaya intrinsik yang sangat dinamis.
Mari kita perluas contoh pertama dengan kartu roket. Bagaimana jika Anda memiliki kartu tanpa gambar? Mungkin Anda ingin memperbesar ukuran judul dan menyesuaikan tata letak petak ke kolom tunggal sehingga terlihat lebih disengaja tanpa gambar.
Dalam contoh ini, kartu dengan gambar memiliki template petak dua kolom, sedangkan kartu tanpa gambar memiliki tata letak kolom tunggal. Selain itu, kartu tanpa gambar memiliki judul yang lebih besar. Untuk menulis ini menggunakan :has(), gunakan CSS berikut.
.card:has(.visual) {
grid-template-columns: 1fr 1fr;
}
Anda sedang mencari elemen dengan class visual untuk menerapkan gaya dua kolom di atas. Fungsi CSS lain yang rapi adalah :not(). Ini adalah bagian dari spesifikasi yang sama dengan :has() tetapi telah ada sejak lama dan memiliki dukungan browser yang lebih baik. Anda bahkan dapat menggabungkan :has() dan :not(), seperti ini:
.card:not(:has(.visual)) h1 {
font-size: 4rem;
}
Dalam kode di atas, Anda menulis pemilih yang menata gaya h1 dalam kartu yang tidak berisi class visual. Ini adalah cara untuk menyesuaikan ukuran {i>font<i} dengan sangat jelas.
Menggabungkan semuanya
Demo di atas menunjukkan kombinasi :has(), :not(), dan @container, tetapi kueri container akan sangat menarik jika Anda dapat melihat elemen yang sama digunakan di beberapa tempat. Mari tambahkan sentuhan gaya dan tunjukkan kartu-kartu ini dalam petak secara berdampingan.
Sekarang Anda benar-benar dapat melihat kekuatan CSS modern. Kita dapat menulis gaya yang jelas menggunakan gaya tertarget yang membangun logika di atas logika dan membuat komponen yang sangat kuat. Dengan dua fitur canggih yang hadir di Chromium 105 dan mendapatkan momentum dukungan lintas browser, ini adalah saat yang menyenangkan untuk menjadi developer UI!