Digital Transformation
CSS Container Query Units (cqi, cqb, cqw, cqh)
TL;DR: CSS Container Query Units adalah satuan ukuran yang menghitung dimensi relatif terhadap container terdekat, bukan viewport. Per April 2026, dukungan browser sudah di atas 92 persen menurut Can I Use. Empat unit utamanya: cqi (inline size), cqb (block size), cqw (width), cqh (height).
Apa itu CSS Container Query Units?
CSS Container Query Units adalah satuan panjang CSS yang nilainya tergantung pada dimensi container terdekat yang memiliki properti container-type: inline-size atau container-type: size. Berbeda dengan vw/vh yang mengukur viewport, satuan ini fleksibel mengikuti kartu, sidebar, atau modul tempat komponen berada. Pendekatan ini membuat satu komponen bisa dipakai di banyak konteks layout tanpa perlu media query terpisah, mirip dengan konsep responsive design tapi lebih granular.
Empat Unit dan Cara Pakai
| Unit | Setara | Kapan Dipakai |
|---|---|---|
cqi | 1% inline size container | Font size adaptif kartu |
cqb | 1% block size container | Tinggi banner adaptif |
cqw | 1% width container | Spacing horizontal |
cqh | 1% height container | Hero modul vertikal |
Contoh praktis: font-size: clamp(0.875rem, 2cqi, 1.25rem) membuat judul kartu otomatis mengecil di sidebar 280px dan membesar di hero 1200px tanpa media query tambahan.
Kenapa Penting untuk Marketer?
Marketer Indonesia yang menjalankan landing page dengan banyak modul reusable, misalnya katalog produk atau profil tim, sering harus duplikasi style untuk setiap breakpoint. Container query units memangkas duplikasi CSS rata-rata 30 hingga 50 persen dalam observasi proyek Vito Atmo. Lebih sedikit CSS berarti file lebih ringan, render lebih cepat, dan skor Core Web Vitals lebih stabil.
Pertanyaan Umum
Apakah container query units sama dengan viewport units?
Tidak. vw/vh mengukur viewport browser. Container query units mengukur container terdekat yang punya container-type. Komponen di sidebar dan hero bisa pakai unit yang sama tapi nilainya berbeda.
Browser apa yang sudah support?
Chrome, Edge, Safari, dan Firefox versi 2023 ke atas sudah support. Untuk browser lama, sediakan fallback dengan unit fixed atau viewport. Detail di MDN Container Queries.
Istilah Terkait