CSS Container Queries Lanjut Container Type Units Style Queries

Definisi

Container queries memungkinkan styling berdasar ukuran container (bukan viewport). container-type mendeklarasikan elemen sebagai container; @container mengevaluasi lebar/tingginya. cqw/cqh adalah unit relatif container. Style queries (eksperimental) mengevaluasi nilai properti CSS container.

Kapan dipakai

Pakai saat komponen dipakai di banyak konteks lebar berbeda (sidebar sempit vs konten lebar). Lebih baik dari media query yang hanya tahu viewport global.

Cara kerja

Container + query

css

.card { container-type: inline-size; }
@container (min-width: 400px) {
  .card { display: grid; grid-template-columns: 1fr 1fr; }
}

Unit container

css

.card { font-size: clamp(1rem, 5cqw, 1.5rem); }

Style query (eksperimental)

css

@container style(--theme: dark) {
  .card { background: #111; }
}

Struktur alur

Catatan implementasi

• container-type: inline-size paling umum (hanya lebar); size untuk tinggi+lebar (lebih mahal).
• Beri nama container (container-name: card) bila banyak container berbeda agar @container card spesifik.
• Unit cqw (1% container width) lebih stabil dari % yang relatif parent block.
• Style queries butuh browser terbaru; sediakan fallback.

Kesalahan umum

• Query ke container sendiri: @container mengevaluasi ancestor, bukan elemen yang dideklarasikan container.
• container-type bocor layout: size membuat elemen collapse tinggi; pakai inline-size.
• Lupa nama saat banyak container: style salah sasaran.
• Over-guarding: media query masih perlu untuk perangkat, container untuk komponen.

Referensi terkait

• CSS Responsive Layout: Media Queries, Container Queries
• CSS Grid Lanjut: Subgrid, Masonry, Implicit Tracks
• HTML Semantics dan Struktur Dokumen