Container Queries: Masa Depan Desain Responsif (Konsep Lanjut)
Selama lebih dari satu dekade, Media Queries (@media) telah menjadi standar mutlak untuk membuat website responsif. Namun, Media Queries memiliki satu kelemahan mendasar: mereka hanya peduli pada ukuran jendela browser (viewport), bukan ukuran ruang di mana komponen itu berada.
Inilah masalah yang dipecahkan oleh Container Queries (@container). Ini adalah fitur CSS revolusioner yang mengubah paradigma dari Page-Based Responsive Design menjadi Component-Based Responsive Design.
1. Masalah dengan Media Queries
Bayangkan Anda mendesain sebuah "Kartu Produk".
-
Anda mengatur Media Query: "Jika layar > 1000px, jadikan kartu ini horizontal."
-
Masalahnya: Jika Anda meletakkan kartu tersebut di dalam Sidebar (yang lebarnya sempit meskipun layar sedang besar), kartu tersebut akan tetap berbentuk horizontal dan akhirnya terpotong atau merusak tata letak.
Media Query memaksa Anda menulis banyak kelas pengecualian (seperti .sidebar .kartu-produk) yang membuat CSS membengkak.
2. Solusi: Apa Itu Container Queries?
Container Queries memungkinkan sebuah komponen untuk merespons (mengubah ukurannya) berdasarkan ukuran elemen induknya (parent container), bukan berdasarkan ukuran jendela browser.
Artinya, satu komponen "Kartu Produk" bisa berbentuk horizontal jika diletakkan di area konten utama yang lebar, dan otomatis berubah menjadi vertikal jika diletakkan di dalam sidebar yang sempit—meskipun ukuran jendela browser tidak berubah sama sekali!
3. Cara Menggunakan Container Queries
Penggunaan Container Queries melibatkan dua langkah sederhana:
Langkah 1: Mendefinisikan Kontainer (Container)
Anda harus memberi tahu browser, elemen mana yang akan menjadi pengukur ruang (biasanya elemen pembungkus/induk).
.card-wrapper { /* Mengatur elemen ini sebagai kontainer berdasarkan lebar bawaannya */ container-type: inline-size; /* (Opsional) Memberi nama kontainer agar lebih spesifik */ container-name: sidebar-area; }
Catatan: inline-size berarti kontainer akan merespons terhadap perubahan lebar.
Langkah 2: Menulis Query (@container)
Alih-alih menggunakan @media, Anda menggunakan @container pada elemen anaknya.
/* Gaya Default (Vertikal - untuk ruang sempit) */
.product-card { display: flex; flex-direction: column;
} /* Jika kontainer (wrapper) memiliki lebar minimal 500px */
@container (min-width: 500px) { .product-card { /* Ubah menjadi horizontal */ flex-direction: row; align-items: center; }
}
4. Satuan Baru: Container Query Units
Sama seperti kita punya vw (Viewport Width), Container Queries membawa satuan barunya sendiri yang berpatokan pada ukuran kontainer, bukan layar:
-
cqw(Container Query Width): 1% dari lebar kontainer. -
cqh(Container Query Height): 1% dari tinggi kontainer. -
cqi(Container Query Inline): Sama dengan cqw (standar logika).
Contoh Penggunaan Cerdas: Membuat teks judul yang membesar sesuai dengan lebar kontainernya (sangat berguna untuk kartu yang bisa ditempatkan di mana saja).
.card-title { /* Teks akan selalu 5% dari lebar kontainernya */ font-size: clamp(16px, 5cqw, 32px); }
5 . Kapan Harus Beralih ke Container Queries?
Container Queries sudah didukung secara penuh di semua browser modern (Chrome 105+, Safari 16+, Firefox 110+).
Gunakan Container Queries Saat:
-
Anda membangun sistem desain atau komponen yang akan digunakan berulang kali di berbagai tempat (misal: widget cuaca yang bisa ditaruh di Header, Sidebar, atau Footer).
-
Anda menggunakan framework JavaScript berbasis komponen (seperti React, Vue, atau Blade Components di Laravel).
Tetap Gunakan Media Queries Saat:
-
Anda mengatur tata letak global tingkat makro (kapan sidebar disembunyikan, kapan hamburger menu muncul).
-
Anda mengatur ukuran font dasar (
html { font-size: ... }).
Kesimpulan untuk Proyek Anda
Untuk proyek portal SatuMedia, Media Queries tetap yang utama untuk menyusun letak Header dan Sidebar. Namun, Container Queries akan sangat brilian jika digunakan untuk kartu "Berita Terkait". Kartu tersebut bisa beradaptasi secara ajaib, baik saat diletakkan di akhir artikel utama maupun saat diselipkan di dalam sidebar!
Eksplorasi Visual: Media vs Container Query
Untuk melihat perbedaannya secara langsung, cobalah widget interaktif di bawah ini. Anda dapat mengubah lebar browser (mengubah Media Query) dan lebar kontainer sidebar secara terpisah.
