Selama satu dekade, media query adalah satu-satunya alat andalan untuk membuat website responsif. Namun media query punya keterbatasan mendasar: ia hanya membaca lebar layar, bukan wadah tempat komponen ditampilkan. Akibatnya, developer sering terjebak menulis breakpoint yang rumit dan komponen yang sulit dipakai ulang. Solusi modernnya bernama container query, fitur CSS yang memungkinkan elemen menyesuaikan gaya berdasarkan ukuran wadahnya, sehingga komponen benar-benar mandiri dan portabel.
Media Query dan Keterbatasannya
Media query bekerja dengan membaca lebar viewport atau orientasi perangkat. Misalnya, @media (min-width: 768px) akan mengubah tampilan ketika layar selebar minimal 768 piksel. Pendekatan ini sangat cocok untuk mengatur layout global, seperti menyembunyikan sidebar di layar sempit atau mengubah tata letak header saat tampil di ponsel.
Masalahnya, komponen modern dipakai berulang kali di berbagai konteks. Bayangkan kartu produk yang sama tampil di sidebar sempit dan area utama yang lebar. Dengan media query, kartu itu akan berperilaku sama persis karena tidak peduli pada wadahnya. Developer pun terpaksa menambahkan class khusus, menumpuk selector, dan membuat banyak breakpoint arbitrer agar tiap konteks bisa diakomodasi.
Akibatnya muncul kode yang rapuh, sulit dirawat, dan sering gagal menghasilkan komponen yang benar-benar reusable. Semakin kompleks sebuah situs, semakin terasa bahwa pendekatan viewport semata tidak cukup untuk komponen yang hidup di banyak tempat.
Apa Itu Container Query?
Container query memungkinkan sebuah elemen menyesuaikan gayanya berdasarkan ukuran wadah induknya, bukan ukuran layar. Konsepnya mirip media query, tetapi kata kuncinya diganti: alih-alih @media (min-width: 700px), kita menulis @container (min-width: 700px).
Artinya, sebuah komponen bisa mengubah tata letaknya sendiri ketika wadah yang menampungnya melebar atau menyempit, meski lebar layar tetap sama. Komponen menjadi lebih mandiri dan cocok diterapkan di mana saja tanpa harus tahu ia akan diposisikan di sidebar atau area utama. Perilaku komponen pun jadi prediktabel karena aturannya melekat pada dirinya, bukan pada halaman.
Kabar baiknya, container query sudah didukung penuh oleh browser modern seperti Chrome, Edge, Firefox, dan Safari versi terbaru. Tidak ada lagi alasan teknis untuk menunda mengadopsinya di proyek-proyek baru.
Sintaks Dasar: container-type dan @container
Untuk memulai, induk elemen harus ditetapkan sebagai containment context. Caranya dengan properti container-type. Berikut contoh paling sederhana:
.card-wrapper {
container-type: inline-size;
container-name: product;
}
@container product (min-width: 700px) {
.card {
display: grid;
grid-template-columns: 220px 1fr;
gap: 16px;
}
}Penjelasan singkat setiap bagian:
- container-type: inline-size menjadikan wrapper sebagai wadah yang ukurannya bisa direspons oleh anak-anaknya.
- container-name: product memberi nama wadah agar bisa dirujuk secara spesifik, terutama jika ada banyak container bersarang.
- @container product (min-width: 700px) adalah aturan yang aktif ketika wadah product selebar minimal 700 piksel, bukan ketika layar selebar itu.
Jika Anda tidak menentukan nama, cukup tulis @container (min-width: 700px) dan aturan itu otomatis merujuk pada container terdekat.
Contoh Praktis: Kartu Produk yang Adaptif
Bayangkan sebuah toko online dengan sidebar rekomendasi dan area katalog utama. Di sidebar yang sempit, kartu produk sebaiknya tampil vertikal dengan gambar kecil dan judul ringkas. Di area katalog yang lebar, kartu yang sama bisa menampilkan gambar besar, deskripsi panjang, dan tombol beli.
Dengan container query, kedua perilaku itu ditulis sekali dalam satu markup yang sama. Satu kelas .card tinggal merespons lebar wadahnya masing-masing. Desainer tidak perlu lagi meniru-niru class khusus sidebar, dan developer tidak perlu lagi menghafal breakpoint mana yang dipakai di halaman tertentu.
Manfaat jangka panjangnya sangat besar: Anda bisa membangun design system yang benar-benar portabel. Sebuah komponen bisa dipindahkan antar halaman, antar proyek, bahkan antar tim tanpa merubah fungsinya, karena ia membawa aturan responsifnya sendiri.
Kelebihan Container Query untuk Developer dan Desainer
Dari sisi developer, container query mengurangi kode duplikat. Alih-alih menulis aturan berbeda untuk sidebar dan area utama, Anda cukup menulis satu aturan yang bekerja di kedua tempat. Proses debugging juga lebih mudah karena sumber perilaku komponen bisa dilacak langsung ke komponennya, bukan tersebar di stylesheet halaman.
Dari sisi desainer, container query menjamin konsistensi visual. Sebuah komponen yang tampil sama di semua konteks akan otomatis menyesuaikan proporsinya, sehingga hasil akhir lebih rapi dan sesuai niat desain. Kolaborasi antara desainer dan developer pun mulus karena spek komponen kini bisa dijelaskan dalam satu dokumen tunggal.
Belum lagi, container query mendorong pola component-driven development yang populer di ekosistem React, Vue, dan Web Components. Dengan begitu, perpindahan dari desain statis ke aplikasi interaktif menjadi jauh lebih lancar.
Kapan Pakai Media Query dan Kapan Pakai Container Query
Keduanya bukan saling menggantikan, melainkan melengkapi. Berikut panduan praktis memilihnya:
- Gunakan container query untuk komponen yang dipakai ulang, seperti kartu, panel, widget, dan galeri.
- Gunakan media query untuk layout global, seperti struktur halaman, navigasi, grid utama, dan mode gelap berbasis preferensi perangkat.
- Kombinasikan keduanya bila diperlukan, misalnya kerangka halaman pakai media query sementara komponen di dalamnya pakai container query.
Strategi paling aman untuk proyek yang sudah berjalan adalah menerapkan container query secara bertahap pada komponen baru, lalu migrasikan komponen lama saat di-refactoring. Jangan buru-buru mengganti semua media query sekaligus, karena risiko breaking layout justru lebih besar.
Kesimpulannya, container query bukan pembunuh media query, melainkan alat baru yang menyelesaikan masalah desain komponen sekaligus. Dengan browser yang sudah mendukung dan manfaat nyata bagi design system, container query layak mulai dipakai hari ini.
