Kueri penampung ditempatkan di browser stabil

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

Una Kravets

Kueri container semakin menggembirakan! Di hari Valentine ini, kueri penampung ukuran dan unit kueri penampung akan 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 lokasinya di UI.

Kueri penampung 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, pertama-tama tetapkan pembatasan pada elemen induk. 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;
}

Menyetel container-type ke inline-size akan membuat kueri ukuran arah inline induk. Dalam bahasa latin seperti bahasa Inggris, ini adalah lebar kartu, karena teks mengalir sejajar dari kiri ke kanan.

Sekarang, Anda dapat menggunakan penampung tersebut untuk menerapkan gaya ke salah satu 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 nilai unit berbasis area pandang. Perbedaannya adalah bahwa unit penampung sesuai dengan penampung, bukan dengan area pandang. Contoh berikut menunjukkan tipografi responsif menggunakan unit kueri penampung dan fungsi clamp() untuk memberikan nilai ukuran minimum dan maksimum:

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

15cqi di atas mengacu pada 15% ukuran inline container. Fungsi clamp() memberikan nilai minimum 2rem dan maksimum 4rem. Sementara itu, jika 15cqi berada di antara nilai ini, teks akan menyusut dan membesar.

Kueri container Valentine

Untuk merayakan antusiasme kueri container pada liburan ini, kami membuat Valentine untuk Anda semua, apa pun browser stabil (versi terbaru) yang Anda gunakan untuk melihat ini!