CSS Container Queries

TL;DR: CSS Container Queries memungkinkan elemen menyesuaikan tampilan berdasarkan lebar atau tinggi kontainer pembungkusnya, bukan ukuran layar global. Fitur ini melengkapi media queries dan menjadi tulang punggung desain modular yang konsisten di sidebar, grid, atau modal mana pun.

Apa itu Container Queries?

Container Queries adalah ekstensi CSS yang memungkinkan kita menulis aturan seperti "jika kontainer pembungkus minimal 480 px, ubah layout kartu menjadi dua kolom". Berbeda dengan media queries yang membaca viewport, container queries membaca kontainer terdekat yang sudah diberi container-type. Konsep ini selaras dengan Islands Architecture dan filosofi atomic design yang dipakai di banyak proyek Next.js modern.

Cara Kerja

Tandai elemen pembungkus dengan container-type: inline-size. Lalu tulis query: @container (min-width: 480px) { .card { grid-template-columns: 1fr 1fr; } }. Komponen yang sama bisa berperilaku berbeda di sidebar 320 px versus konten utama 800 px tanpa duplikasi class. Per April 2026, dukungan sudah stabil di Chrome, Safari, Firefox, dan Edge.

Kenapa Penting?

Bagi tim frontend Indonesia yang membangun design system reusable, container queries menghapus kebutuhan menulis varian "card-sm", "card-md", "card-lg" hanya karena letaknya berbeda. Komponen jadi benar-benar self-contained. Ini juga membuat halaman lebih cepat karena CSS lebih ringkas dan mengurangi layout shift saat viewport berubah. Lihat View Transitions API untuk fitur frontend modern lainnya yang sering dipakai bareng.

Pertanyaan Umum

Apakah container queries menggantikan media queries?

Tidak. Keduanya saling melengkapi. Gunakan media queries untuk layout makro (header, sidebar, footer) dan container queries untuk komponen modular.

Apakah ada penalti performa?

Sangat kecil. Berdasarkan benchmark di web.dev, overhead rendering di bawah 1 ms untuk halaman dengan ratusan kontainer.