CSS Container Queries: Qu' lIj

media queries wa' Qap 'e' jang: viewport chay' tIn? Component law' vaD Qapbe' - card, sidebar widget, product tile browser window chay' tIn qaS pagh: 'oH chay' bIngDaq ghaj, 'ej layout Daq ngu' Dung. Container queries Qap component poQ jang.

media-query-only responsive design Qagh

<card> component ghaj. 'ay' vaj horizontal layout vertical layout choH. media queries Daq viewport tIn guess:

.card {
  display: flex;
  flex-direction: row;
}

@media (max-width: 500px) {
  .card {
    flex-direction: column;
  }
}

card viewport Hoch tIn vaj Dun. 'ach card sidebar narrow Daq (1400px desktop) vaj vertical layout poQ 'ach pagh: viewport tIn 'ach card bIngDaq mach. component Dej parent ngu' Dung.

containment context chenmoH

container queries Qap choH: "viewport chay' tIn?" pagh, "wa' ancestor query container ghaH chay' tIn?". container-type Daq opt in:

.card-grid {
  container-type: inline-size;
  container-name: card-grid;
}

inline-size "container width legh". container-name optional - container law' nested vaj wa' ancestor Dung.

container Daq query

containment vaj descendants container size query viewport pagh:

.card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@container card-grid (min-width: 400px) {
  .card {
    flex-direction: row;
    gap: 16px;
  }
}

.card component horizontal 400px+ container width ghaj - wa'pagh page tIn Daq pagh wej column mach page Daq. component bIngDaq real Daq QaS, viewport mI' pagh.

Container query units

@container 'ej length units ghaj. query container Daq resolve: cqw, cqh, cqi, cqb, cqmin, cqmax (vw/vh/vmin/vmax rap, container-relative). fluid typography vaD Dun:

.card-title {
  font-size: clamp(14px, 5cqi, 22px);
}

5cqi container inline size 5%. title card tIn vaj tIn, 14px 22px ghom.

Qagh: container jIH query

container-type element Daq containment chenmoH. @container queries nearest ancestor legh. element jIH query laHbe':

/* This does NOT work as you might expect */
.card {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    /* .card can't query the container-type it declares on itself */
  }
}

Qotlh: container-type parent (.card-grid) Daq jan, children (.card) query. Hoch Qatlh: card jIH tIn legh 'ach containment wa' level Dung.

browser support 'ej fallback

Chrome, Firefox, Safari, Edge Daq container queries Dun. old browser vaD @supports media query fallback nob:

.card {
  flex-direction: column;
}

@media (min-width: 700px) {
  .card {
    flex-direction: row;
  }
}

@supports (container-type: inline-size) {
  @media (min-width: 700px) {
    .card {
      flex-direction: column; /* undo the media-query version */
    }
  }

  .card-grid {
    container-type: inline-size;
  }

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

yaj

media queries viewport. container queries component bIngDaq real. sidebar Daq component Qagh vaj container queries Qotlh.