Digital Transformation
CSS Container Queries
TL;DR: CSS Container Queries adalah fitur CSS modern yang membuat sebuah komponen merespons ukuran kontainer induknya, bukan ukuran viewport. Per 2024 fitur ini sudah didukung penuh oleh Chrome, Safari, dan Firefox versi stabil, sehingga aman dipakai di website bisnis tanpa polyfill berat.
Apa itu CSS Container Queries?
CSS Container Queries memungkinkan satu komponen, misal kartu produk, tampil dua kolom saat dipasang di sidebar sempit dan tiga kolom saat dipasang di area konten utama. Hal ini berbeda dari media query yang hanya melihat ukuran layar. Dampaknya, satu komponen bisa dipakai ulang di banyak tempat tanpa override CSS yang menumpuk.
Cara Kerja
Pendekatannya dua langkah: tandai elemen sebagai container dengan container-type: inline-size, lalu pakai aturan @container untuk mengubah style berdasarkan lebar container.
| Properti | Fungsi |
|---|---|
container-type | Menentukan dimensi yang diukur (inline-size, size) |
container-name | Memberi nama agar bisa dipanggil spesifik di @container |
@container (min-width: 480px) | Aturan style berbasis lebar container |
Kenapa Penting?
Untuk website bisnis Indonesia yang dipasang komponen reusable, satu kartu testimonial bisa hidup di hero, footer, dan halaman tentang dengan lebar berbeda. Tanpa container queries, tim sering menulis ulang style untuk tiap tempat. Praktik standar di industri sekarang menempatkan container queries sebagai default untuk komponen kartu, list, dan grid produk.
Pertanyaan Umum
Apakah Container Queries menggantikan Media Queries?
Tidak. Media queries tetap relevan untuk layout level halaman dan tema gelap. Container queries lebih cocok untuk komponen yang dipakai ulang di banyak slot.
Apakah aman dipakai di production website bisnis?
Aman sejak 2024. Caniuse mencatat dukungan global di atas 90 persen, termasuk Chrome Android dan Safari iOS. Untuk fallback browser lama, sediakan style default tanpa @container.
Istilah Terkait