Kueri container dan :has() sama-sama cocok di bidang responsif. Untungnya, kedua fitur ini muncul bersamaan di Chromium 105. Ini adalah rilis besar dengan dua fitur yang banyak diminta untuk antarmuka responsif!
Kueri Penampung: ringkasan singkat
Kueri penampung memungkinkan developer membuat kueri pemilih induk untuk informasi ukuran dan gayanya, sehingga memungkinkan elemen turunan memiliki logika gaya visual responsifnya, di mana pun elemen tersebut berada di halaman web.
Alih-alih mengandalkan area pandang untuk input penataan gaya seperti ruang yang tersedia, developer kini juga dapat mengkueri ukuran elemen dalam halaman. Kemampuan ini berarti bahwa komponen memiliki logika gaya visual responsifnya. Hal ini membuat komponen jauh lebih tangguh, karena logika gaya visual dikaitkan padanya, di mana pun komponen tersebut muncul di halaman.
Menggunakan kueri container
Untuk membangun dengan kueri container, Anda harus terlebih dahulu menetapkan containment pada elemen induk. Lakukan hal ini dengan menetapkan container-type pada 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;
}
Menyetel container-type menjadi inline-size akan mengkueri ukuran arah inline induk. Dalam bahasa latin seperti bahasa Inggris, ukuran ini adalah lebar kartu, karena teks mengalir inline 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;
}
}
Pemilih induk :has()
Class pseudo :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 menggunakannya untuk menata gaya paragraf induk, 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() dalam artikel oleh Jhey Tompkins ini.
Kueri penampung dan :has()
Anda dapat menggabungkan kekuatan pemilihan induk :has() dengan kemampuan 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 menambah ukuran judul dan menyesuaikan tata letak {i>grid<i} ke satu kolom 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 menulisnya 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 agar Anda dapat menyesuaikan ukuran font dengan sangat jelas.
Penutup
Demo di atas menunjukkan kombinasi :has(), :not(), dan @container, tetapi kueri penampung benar-benar menonjol jika Anda dapat melihat elemen yang sama digunakan di beberapa tempat. Mari tambahkan sentuhan gaya dan tampilkan kartu-kartu ini dalam petak bersama satu sama lain.
Sekarang Anda benar-benar dapat melihat kehebatan CSS modern. Kita dapat menulis gaya yang jelas menggunakan gaya yang ditargetkan yang membangun logika di atas logika dan membuat komponen yang sangat tangguh. Dengan adanya dua fitur canggih ini di Chromium 105 dan mendapatkan momentum dukungan lintas browser, ini adalah saat yang menyenangkan untuk menjadi developer UI!