Kueri penampung ditempatkan di browser stabil

Di hari Valentine ini, kami merayakan kueri penampung ukuran dan unit kueri penampung yang hadir di semua browser stabil.

Una Kravets

Cinta kueri container sedang digelar! Di hari Valentine ini, kueri penampung ukuran dan unit kueri penampung sudah stabil di semua browser modern.

Dengan kueri container, Anda dapat mengkueri informasi gaya visual elemen induk, seperti inline-size-nya. Dengan kueri media, Anda dapat membuat kueri ukuran area pandang, kueri penampung memungkinkan komponen yang dapat berubah berdasarkan posisi mereka di UI.

Kueri container sangat berguna untuk desain responsif dan komponen yang dapat digunakan kembali. Misalnya, mengaktifkan komponen kartu yang dapat ditata dengan satu cara saat ditempatkan di sidebar, dan dalam konfigurasi yang berbeda dalam petak produk.

Menggunakan kueri penampung

Untuk menggunakan kueri penampung, tetapkan pembatasan pada elemen induk terlebih dahulu. Lakukan hal ini dengan menetapkan container-type di penampung induk, atau gunakan singkatan container untuk memberinya jenis dan nama secara bersamaan:

.card-container {
  container: card / 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, Anda dapat menggunakan penampung tersebut untuk menerapkan gaya ke turunannya menggunakan @container:

.card-child {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
 .card-child {
  grid-template-columns: 1fr;
 }
}

Selain itu, Anda dapat menggunakan nilai unit panjang kueri penampung dengan cara yang sama seperti saat menggunakan nilai unit berbasis area pandang. Perbedaannya adalah unit penampung sesuai dengan penampung, bukan area pandang. Contoh berikut menunjukkan tipografi responsif menggunakan unit kueri container dan fungsi clamp() untuk memberikan nilai ukuran minimum dan maksimum:

.card-child h2 {
  font-size: clamp(2rem, 15cqi, 4rem);
}

15cqi di atas merujuk pada 15% ukuran inline container. Fungsi clamp() memberi ini nilai minimum 2 rem, dan maksimum 4 rem. Sementara itu, jika 15cqi berada di antara nilai ini, teks akan menyusut dan bertambah sesuai kebutuhan.

Kueri container Valentine

Untuk merayakan rasa cinta terhadap kueri container pada liburan ini, kami telah membuat Valentine untuk dinikmati semua, terlepas dari browser stabil apa (versi terbaru) yang Anda gunakan untuk melihat konten ini.