Container Query Units

Satuan viewport mengukur terhadap jendela browser, dan persentase mengukur terhadap containing block. CSS modern menambahkan rujukan ketiga yang lebih halus: ukuran query container — elemen yang ditandai dengan container-type. Satuan keluarga cq membuat komponen bisa dirancang sekali lalu menyesuaikan dirinya di mana pun ia ditempatkan: judul kartu di sidebar sempit otomatis lebih kecil daripada judul kartu yang sama di kolom utama. Pada Chapter ini kita memetakan keenam satuan tersebut, menautkannya dengan container query, lalu membuktikannya lewat demo.

Satuan yang Mengikuti Container #

Langkah pertama adalah menandai elemen induk sebagai container dengan properti container-type . Nilai inline-size yang paling umum membuat ukuran inline (lebar pada penulisan horizontal) elemen tersebut menjadi rujukan bagi anak-anaknya. Setelah itu, setiap elemen di dalamnya dapat memakai satuan cq*:

Satuan ini berpasangan dengan aturan container query @container: satuan mengatur ukuran secara proporsional, sementara @container mengganti gaya pada ambang lebar tertentu. Keduanya merupakan Baseline sejak 2023 dan didukung penuh di browser utama. Satuan cq* dapat dipakai pada properti panjang apa pun — font-size, padding, margin, gap, hingga border-radius — sehingga seluruh skala komponen bisa diikat ke ukuran container. Bila satu halaman memuat beberapa container, properti container-name dapat menandai container tertentu, dan query atau satuan tetap mengikuti container terdekat yang membungkus elemen tersebut.

Demo: Kartu yang Menyesuaikan Container #

Demo berikut menjadikan kartu 600px sebagai container, lalu mengatur ukuran isinya dengan cqi:

.kartu {
  width: 600px;
  container-type: inline-size;
}
.judul {
  font-size: 5cqi;
}
.isi {
  width: 25%;
  padding: 4cqi;
}
@supports (width: 1cqi) {
  .isi {
    width: 25cqi;
  }
}
@container (min-width: 480px) {
  .badge {
    background-color: rgb(22, 163, 74);
  }
}

Mari kita telaah baris demi baris:

1. Baris 1–4 (.kartu): kartu diberi lebar pasti 600px dan dinyatakan sebagai container ber-type inline-size; angka 600px inilah yang menjadi rujukan semua satuan cq di dalamnya.
2. Baris 5–7 (.judul): 5cqi berarti 5% dari 600px, sehingga judul berukuran 30px.
3. Baris 8–11 (.isi): sebagai cadangan, lebar ditulis dengan persentase 25% yang bekerja di mana saja.
4. Baris 12–16 (@supports): bila browser mengenal satuan cqi, lebar diganti 25cqi — nilainya tetap 150px pada container ini, tetapi kini mengikuti container, bukan containing block, ketika kartu dipindah ke layout lain. padding: 4cqi menghasilkan 24px.
5. Baris 17–21 (@container): karena lebar container 600px memenuhi ambang min-width: 480px, badge memperoleh latar hijau.

Hasil di Browser:

Kartu berperan sebagai query container selebar 600px.
Judul tampil berukuran 30px (5cqi = 5% × 600px).
Kotak isi tampil selebar 150px (25cqi) dengan padding 24px (4cqi).
Badge berlatar hijau rgb(22, 163, 74) karena container 600px
memenuhi syarat @container (min-width: 480px).

Keempat nilai di atas terverifikasi otomatis melalui penanda data-expected pada demo; harness Course membaca nilai computed font-size, width, padding-top, dan background-color di headless browser. Uji gagasan utama chapter ini dengan mudah: ubah width kartu menjadi 300px pada demo, dan judul, lebar isi, serta padding ikut menyusut secara proporsional tanpa satu pun aturan media query.