Digital Transformation
CSS Container Query
TL;DR: CSS Container Query memungkinkan komponen berubah layout berdasarkan ukuran parent container, bukan viewport. Didukung penuh sejak Chrome 105, Safari 16, dan Firefox 110. Cocok untuk component-driven design system, karena satu card bisa terlihat berbeda di sidebar (sempit) dan di main grid (lebar) tanpa media query global.
Apa itu Container Query?
Container Query adalah evolusi dari responsive design. Selama 15 tahun, media query mengukur viewport (min-width: 768px). Pendekatan ini bermasalah saat satu komponen muncul di banyak slot dengan lebar berbeda. Sidebar 320 px dan main area 800 px akan menerima style yang sama karena viewport-nya tetap.
Container Query membalik logikanya. Anda mendeklarasikan elemen induk sebagai container, lalu komponen anak bisa bertanya "berapa lebar parent-ku?" dan menyesuaikan layout berdasarkan itu. Hasilnya: satu komponen, banyak konteks, tanpa override CSS.
Cara Kerja
.card-grid {
container-type: inline-size;
container-name: cardgrid;
}
@container cardgrid (min-width: 400px) {
.card { display: grid; grid-template-columns: 120px 1fr; }
}
| Properti | Fungsi |
|---|---|
container-type: inline-size | Container memantau lebar (horizontal) |
container-type: size | Memantau lebar dan tinggi |
container-name | Nama opsional untuk dirujuk di @container |
cqw, cqh | Unit relatif terhadap container |
Kenapa Penting untuk Website Bisnis?
Untuk tim yang menjalankan design system atomic, Container Query memangkas waktu maintenance secara signifikan. Saat membangun card produk untuk e-commerce, biasanya ada 3-4 varian (hero, grid, sidebar, related). Tanpa Container Query, masing-masing butuh class modifier dan media query terpisah. Dengan Container Query, satu file CSS cukup.
Per Mei 2026, dukungan global di atas 92% (caniuse.com). Untuk audience Indonesia yang mayoritas Chrome dan Safari mobile, aman dipakai di produksi tanpa polyfill.
Pertanyaan Umum
Apakah Container Query menggantikan Media Query?
Tidak. Keduanya saling melengkapi. Media query masih relevan untuk layout halaman secara keseluruhan (sidebar muncul atau tidak). Container Query untuk komponen di dalamnya.
Berapa biaya performa-nya?
Hampir nol di browser modern. Browser mengoptimasi recalc layout via containment, jadi tidak ada reflow tambahan signifikan dibanding media query biasa.