Container query bikin satu komponen ganti tampilan mengikuti lebar kotak pembungkusnya, bukan lebar layar. Kartu yang sama bisa numpuk di sidebar yang sempit dan berjajar di kolom utama yang lega, tanpa CSS tambahan. Mirip meja lipat: dibuka lebar di ruangan luas, dilipat di pojok yang sempit.
🧪 Tebakan cepat: kalau
.wrappergak dibericontainer-type, apa aturan di dalam@containertetap jalan? Tebak dulu, jawabannya ada di bagian "Dua langkah: tandai container, lalu tanya".
Kartu yang ikut lebar pembungkusnya
<div class="wrapper">
<div class="card">
<img src="foto.jpg" alt="Foto produk">
<p>Judul kartu</p>
</div>
</div>
<style>
.wrapper {
container-type: inline-size;
}
@container (min-width: 350px) {
.card {
display: flex;
gap: 16px;
}
}
</style>
.wrappermembungkus.card.container-type: inline-sizemenjadikannya container: kotak yang lebarnya boleh ditanya.inline-sizeartinya yang diukur lebarnya.@container (min-width: 350px)adalah pertanyaannya: "container terdekat lebarnya minimal 350px?".card { ... }di dalam kurung kurawal itu cuma berlaku kalau jawabannya ya.
Hasilnya: selama .wrapper lebih sempit dari 350px, aturan di @container gak dipakai, jadi foto dan judul numpuk, foto di atas. Begitu .wrapper selebar 350px atau lebih, .card jadi flex dan fotonya pindah ke kiri judul. Lebar layarnya gak berubah sama sekali, yang berubah cuma lebar pembungkusnya.
Dua langkah: tandai container, lalu tanya
- Tandai pembungkusnya dengan
container-type. Istilah resminya, elemen itu jadi containment context: titik acuan buat@container. - Tulis
@container (kondisi) { ... }berisi aturan buat elemen di dalamnya.
Jawaban tebakan: gak jalan. Tanpa container-type gak ada container yang bisa ditanya, jadi aturan di @container gak pernah dipakai, selebar apa pun pembungkusnya.
Aturan di dalam @container mengatur isi container, bukan container itu sendiri. Makanya container-type ditaruh di .wrapper, sedangkan yang berubah .card.
Nilai container-type yang perlu kamu tahu:
inline-size: yang diukur lebarnya. Ini yang paling sering dipakai.size: lebar dan tinggi. Container-nya butuh tinggi yang ditulis jelas, jadi jarang dipakai.normal: nilai bawaan, artinya bukan container.
Beda dengan media query
Media query (@media) juga menanyakan ukuran, tapi yang ditanya viewport: lebar layar atau jendela browser. Lengkapnya ada di materi Media Queries.
@media (min-width: 600px)mengecek lebar layar.@container (min-width: 600px)mengecek lebar container terdekat, yaitu elemen induk yang dibericontainer-type.
Pakai @media buat tata letak seluruh halaman, dan @container buat komponen yang dipasang di banyak tempat, kayak kartu atau widget.
⚠️ Jebakan yang sering ketemu
container-typedi elemen yang mau diubah. Taruh di pembungkusnya, lalu tulis aturan buat anaknya. Container gak bisa mengubah dirinya sendiri lewat@container.- Pembungkus yang lebarnya ikut isi. Dengan
inline-size, lebar container gak lagi dihitung dari isinya. Kalau pembungkusnyainline-blockatau item flex tanpa lebar, dia bisa mengecil jadi 0. Kasih lebar yang jelas, misalnyawidth: 100%. - Container bersarang. Tanpa nama,
@containerselalu menanyai container terdekat. Mau yang lain? Kasih nama:container-name: kartu;, lalu tulis@container kartu (min-width: 350px).
TL;DR: Container query mengubah komponen sesuai lebar pembungkusnya, bukan lebar layar. Langkah 1: kasih pembungkusnya container-type: inline-size. Langkah 2: tulis @container (min-width: 350px) { ... } berisi aturan buat elemen di dalamnya. Tanpa container-type, @container gak pernah jalan. @media mengecek viewport, @container mengecek container.
