Container Types

Media query hanya membaca ukuran viewport, padahal komponen seperti kartu, panel, dan widget sering dipakai di ruang yang leharnya berbeda-beda: satu kartu identik bisa berada di sidebar selebar 280px atau di kolom utama selebar 700px. Container queries menjawab masalah tersebut dengan menanyakan ukuran wadah komponen, bukan ukuran layar. Namun ada satu prasyarat yang harus dipenuhi lebih dulu: sebuah elemen harus dinyatakan sebagai query container sebelum kondisi @container dapat mengacu padanya. Pada Chapter ini kita mempelajari properti container-type beserta implikasi containment-nya, lalu menandai container dengan container-name.

Tiga Nilai container-type #

Properti container-type menerima tiga nilai yang menentukan sejauh mana elemen tersebut dapat diquery:

Nilai inline-size adalah pilihan andalan untuk hampir semua kasus: browser membekukan ukuran lebar elemen dari pengaruh isinya, sementara tingginya tetap tumbuh mengikuti konten seperti biasa. Nilai size lebih ketat karena browser menganggap elemen tidak punya isi saat menghitung ukurannya sendiri, sehingga tinggi harus dinyatakan eksplisit. Nilai normal adalah bawaan setiap elemen; elemen tersebut bukan container bagi size query, tetapi tetap bisa menjadi rujukan bagi style query yang kita bahas pada Chapter Container Style Queries Overview .

.panel-samping {
  container-type: inline-size;
}

.kotak-penuh {
  container-type: size;
  height: 200px; /* wajib: isi tidak ikut dihitung */
}

Mari kita telaah aturan di atas:

1. Baris 1–2 (.panel-samping): elemen dinyatakan sebagai container inline-size. Seluruh keturunannya kini dapat menjalankan @container (min-width: ...) yang dihitung dari lebar panel ini, dan dapat memakai satuan cqi.
2. Baris 4–6 (.kotak-penuh): elemen dinyatakan sebagai container size. Karena isinya diabaikan saat menghitung ukuran, deklarasi height: 200px menyediakan tinggi yang pasti; tanpa deklarasi tersebut tingginya menciut menjadi 0px.

Implikasi Containment #

Mengapa browser menuntut deklarasi ini alih-alih membiarkan semua elemen diquery? Jawabannya ada pada cara browser menghitung layout. Untuk mengetahui “seberapa lebar wadahku”, browser harus menghitung ukuran container terlebih dahulu tanpa terlibat lingkaran penyebab: ukuran isi bergantung pada container, dan kondisi query bergantung pada ukuran isi. Properti container-type memutus lingkaran tersebut dengan menerapkan containment — browser memastikan ukuran (atau ukuran inline) elemen ditentukan tanpa memeriksa isinya.

Efek samping praktisnya perlu diingat. Pada container inline-size, lebar elemen berperilaku seperti biasa untuk block-level (mengisi ruang horizontal), tetapi komponen yang lebarnya ditentukan isi — misalnya width: fit-content atau elemen float — tidak lagi memengaruhi ukuran container. Pada container size, dampaknya lebih besar: margin collapse dengan isi, penyesuaian tinggi otomatis, dan semua perhitungan berbasis isi ditiadakan. Karena itu container size paling cocok untuk komponen dengan dimensi tetap seperti panel dasbor atau viewport internal ber-scroll.

Menandai Container dengan container-name #

Bila satu halaman memuat beberapa container, container-name memberi label agar query hanya mengacu pada container tertentu:

.sidebar {
  container: panel / inline-size; /* shorthand: nama / type */
}

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

1. Baris 1–2: shorthand container menggabungkan container-name: panel dan container-type: inline-size dalam satu deklarasi.
2. Baris 4: kondisi query kini menyebut nama panel, sehingga hanya elemen di dalam container berlabel tersebut yang mengevaluasi aturan ini — container lain dengan lebar serupa tidak terpengaruh.

Demo: Membandingkan Tiga Container #

Demo pada chapter ini menampilkan tiga panel: container inline-size, container size dengan height: 200px, dan container size tanpa tinggi eksplisit.

Hasil di Browser:

Panel 1 (inline-size): container-type terbaca "inline-size" dengan
container-name "panel"; tingginya mengikuti isi.
Panel 2 (size + height 200px): container-type terbaca "size";
tinggi computed 200px sesuai deklarasi.
Panel 3 (size tanpa height): teks isi tidak menambah tinggi;
tinggi computed 0px — bukti containment size.

Nilai-nilai tersebut diverifikasi otomatis oleh penanda data-expected pada demo: container-type, container-name, dan height dibaca langsung dari computed style di headless browser. Coba ubah urutannya: hapus height: 200px pada panel kedua, dan panel tersebut ikut menciut menjadi 0px seperti panel ketiga.