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; }