Container Query Units

Container queries mengubah gaya pada ambang tertentu; satuan container query melangkah lebih jauh dengan membuat ukuran elemen berubah terus-menerus mengikuti wadahnya. Satuan keluarga cq — container query length units — mengukur panjang sebagai persentase dari dimensi container terdekat, bukan dari viewport. Satu kartu yang seluruh skala tipografi, padding, dan sudutnya ditulis dalam satuan cq akan tampak proporsional di sidebar maupun di kolom utama tanpa satu pun query. Pada Chapter ini kita memetakan keenam satuan tersebut dan membuktikannya pada satu container.

Enam Satuan dan Rujukannya #

Seluruh satuan ini merupakan Baseline sejak 2023, satu paket dengan container query itu sendiri. Satuan cq* dapat dipakai pada properti panjang apa pun: font-size, padding, gap, width, hingga border-radius. Untuk peta singkat lain perspektif satuan, Chapter Container Query Units di section Values dan Units membahasnya sebagai anggota keluarga satuan CSS; Chapter ini fokus pada pemakaiannya di dalam komponen setelah container dinyatakan dengan container-type (lihat Container Types ).

Demo: Semua Satuan pada Satu Container #

Demo memakai container size berukuran pasti 600px × 200px, sehingga 1cqi/cqw = 6px, 1cqh/cqb = 2px, 1cqmin = 2px, dan 1cqmax = 6px:

.panel {
  container-type: size;
  width: 600px;
  height: 200px;
}

.satuan-lebar { width: 25cqi; }   /* 25% × 600px = 150px */
.satuan-tinggi { height: 25cqh; } /* 25% × 200px = 50px */
.satuan-minim { border-radius: 5cqmin; } /* 5 × 2px = 10px */
.satuan-maks { font-size: 2cqmax; }      /* 2 × 6px = 12px */

Mari kita telaah perhitungannya:

1. Baris 1–5 (.panel): container size menuntut dimensi eksplisit — di sinilah kebutuhan height dari Chapter Container Types terasa manfaatnya, karena keempat satuan blok ikut bekerja. Perhatikan pula bahwa panel sengaja tanpa padding dan border: satuan cq mengukur content box container, sehingga setiap padding atau border menggeser basis perhitungannya.
2. Baris 7 (.satuan-lebar): 25cqi menghasilkan 150px; bila panel diperlebar menjadi 800px, kotak ini ikut membesar menjadi 200px tanpa deklarasi baru.
3. Baris 8 (.satuan-tinggi): 25cqh menghasilkan 50px dari tinggi 200px — bukti bahwa cqh mengikuti dimensi blok container size.
4. Baris 9 (.satuan-minim): cqmin mengambil sisi terpendek (200px), sehingga 5cqmin menghasilkan radius 10px.
5. Baris 10 (.satuan-maks): cqmax mengambil sisi terpanjang (600px), sehingga 2cqmax menghasilkan font 12px.

Hasil di Browser:

Kotak 25cqi tampil selebar 150px; kotak 25cqh setinggi 50px.
Sudut kotak 5cqmin ber-radius 10px; teks 2cqmax berukuran 12px.
Kotak 25cqw di luar container (fallback viewport) tampil
selebar 320px — 25% dari lebar viewport 1280px.

Lima nilai tersebut diverifikasi otomatis oleh data-expected pada demo.

Fallback Viewport dan Jebakan cqh #

Satuan cq* hanya bermakna di dalam container. Bila tidak ada leluhur yang dinyatakan sebagai container, browser memakai small viewport sebagai rujukan: cqw berperilaku seperti svw, cqh seperti svh, dan seterusnya. Pada viewport uji 1280px, kotak 25cqw di luar container terukur 320px — persis perilaku yang diprobe demo.

Jebakan yang paling sering menjebak: pada container inline-size, satuan cqh dan cqb tidak mengukur tinggi container tersebut, melainkan kembali ke small viewport — karena sumbu blok container inline-size memang bukan dimensi yang dapat diquery. Dengan kata lain, cqh hanya mengikuti container bila container-nya bertipe size.

Dengan container types, size queries, dan satuan cq yang kini lengkap, Chapter berikutnya menyatukan semuanya menjadi pendekatan desain komponen yang portabel.