Container Size Queries

Setelah sebuah elemen dinyatakan sebagai container dengan container-type, kita dapat menulis aturan yang hanya aktif bila ukuran wadahnya memenuhi kondisi tertentu. Aturan tersebut ditulis dengan container query @container — sintaksnya mirip media query, tetapi rujukannya adalah container terdekat, bukan viewport. Pada Chapter ini kita menulis size query pertama untuk sebuah kartu yang menyusun dirinya secara vertikal di wadah sempit dan horizontal di wadah lebar.

Sintaks @container dan Kondisi Ukuran #

Bentuk paling dasar dari container size query adalah:

@container (min-width: 400px) {
  .judul { font-size: 24px; }
}

Kondisi di dalam tanda kurung dievaluasi terhadap ukuran container inline-size terdekat yang membungkus elemen .judul. Kondisi yang tersedia mengikuti kebiasaan media query: min-width, max-width, width, height, aspect-ratio, hingga orientation. Fitur ini merupakan Baseline sejak 2023 (Firefox 110 menjadi browser utama terakhir yang mengirimkannya) dan dapat dipakai di seluruh browser modern tanpa @supports.

Perlu dibedakan dengan cermat: kondisi mengukur container, sedangkan selector di dalam blok menunjuk keturunan container — selector tidak boleh menunjuk container itu sendiri secara langsung. Pola yang aman adalah memberi gaya pada anak atau keturunan yang lebih dalam.

Kartu yang Mengikuti Wadahnya #

Contoh berikut memakai strategi mobile-first: gaya dasar disusun untuk wadah sempit (kolom vertikal), lalu query menaikkan gaya bila wadah mencapai 400px. File CSS utuhnya dipakai demo di akhir chapter:

.kartu-wadah {
  container-type: inline-size;
}

.kartu-isi {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.badge {
  background-color: rgb(148, 163, 184);
  color: rgb(255, 255, 255);
  padding: 4px 12px;
  border-radius: 999px;
  align-self: flex-start;
}

@container (min-width: 400px) {
  .kartu-isi {
    flex-direction: row;
    align-items: center;
  }
  .badge {
    background-color: rgb(37, 99, 235);
  }
}

Mari kita telaah aturan di atas baris demi baris:

1. Baris 1–3 (.kartu-wadah): elemen pembungkus dinyatakan sebagai container inline-size; inilah satu-satunya syarat agar query di bawahnya berfungsi.
2. Baris 5–9 (.kartu-isi): gaya dasar kartu memakai flexbox dengan flex-direction: column, sehingga konten tersusun vertikal di wadah mana pun secara bawaan.
3. Baris 11–16 (.badge): badge diberi latar abu-abu netral sebagai kondisi awal untuk wadah sempit.
4. Baris 18–25 (@container): bila container terdekat selebar minimal 400px, arah flex berubah menjadi row — badge tampil sejajar teks — dan latar badge naik kelas menjadi biru.

Perubahan tersebut terjadi tanpa satu pun media query: kartu yang sama menghasilkan dua tampilan hanya karena ditempatkan di wadah berbeda.

Hasil di Browser:

Kartu di wadah 600px: .kartu-isi flex-direction "row" (query aktif),
badge berlatar biru rgb(37, 99, 235).
Kartu di wadah 300px: .kartu-isi flex-direction "column" (gaya dasar),
badge tetap berlatar abu-abu rgb(148, 163, 184).

Memilih Container dengan Nama #

Bila kartu tersebut berada di dalam container bersarang, query tanpa nama akan mengambil container terdekat — dan terkadang itu bukan yang kita maksud. Properti container-name (dibahas pada Chapter Container Types ) memungkinkan kita menyasar container tertentu:

@container kartu (min-width: 400px) {
  .kartu-isi { flex-direction: row; }
}

Kondisi kini hanya mengevaluasi container berlabel kartu. Kebiasaan yang sehat dalam proyek nyata: beri nama pada container komponen utama, dan biarkan query tanpa nama untuk kasus sederhana.

Debugging Size Query #

Dua kegagalan paling umum dan cara memeriksanya:

• Query tidak pernah aktif: periksa apakah ada leluhur dengan container-type. Tanpa container, kondisi tidak pernah terpenuhi dan blok @container tidak berlaku sama sekali.
• Query aktif di tempat yang salah: container terdekat bukan yang Anda duga — misalnya pembungkus inline-size di tengah rantai. Gunakan container-name untuk mengunci target, dan periksa rantai induk lewat panel Elements di DevTools.

Demo pada chapter ini memasang kartu yang sama di dua wadah — 600px dan 300px — dan membaca flex-direction beserta warna badge dari computed style, sehingga klaim di atas terverifikasi otomatis.

.kartu-wadah {
  container-type: inline-size;
}

.kartu-isi {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.badge {
  background-color: rgb(148, 163, 184);
  color: rgb(255, 255, 255);
  padding: 4px 12px;
  border-radius: 999px;
  align-self: flex-start;
}

@container (min-width: 400px) {
  .kartu-isi {
    flex-direction: row;
    align-items: center;
  }
  .badge {
    background-color: rgb(37, 99, 235);
  }
}