CSS Container Queries: stilizzare i componenti in base al loro contenitore, non al viewport

Le container query consentono a un elemento di rispondere alla dimensione del suo contenitore genitore invece che alla dimensione dell'intero viewport. È il pezzo mancante che finalmente rende un componente riutilizzabile: la stessa scheda può disporsi in un modo in una barra laterale stretta e in un altro in una colonna principale larga — nella stessa pagina, alla stessa larghezza dello schermo.

Perché le media query non bastavano

Una media query pone una sola domanda: quanto è largo il viewport? Ma un componente non sa quanto è largo il viewport — sa quanto spazio è stato dato a lui. Una scheda inserita in una barra laterale da 300px e la stessa scheda in una cella di griglia da 900px hanno bisogno di layout diversi, eppure la larghezza del viewport è identica. Le container query risolvono esattamente questo.

Passo 1: dichiarare un contesto di contenimento

Si interroga un contenitore, quindi prima devi contrassegnare un elemento come contenitore con container-type:

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

inline-size significa "lasciami interrogare la dimensione inline (di solito orizzontale)" — la scelta più comune. size interroga entrambe le dimensioni e normal disattiva il contenimento.

Passo 2: interrogarlo con @container

Ora qualsiasi discendente di .card-wrapper può adattarsi in base alla larghezza del wrapper:

.card {
  display: grid;
  gap: 1rem;
}

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

Quando il wrapper è largo almeno 400px, la scheda passa a un layout a due colonne. Inserisci lo stesso markup ovunque nella pagina e si adatta al punto in cui finisce — senza bisogno di media query a livello di pagina.

Nominare i contenitori

Quando i contenitori sono annidati, dai loro dei nomi con container-name in modo che una query colpisca quello giusto:

.layout { container: layout / inline-size; } /* name / type shorthand */

@container layout (min-width: 600px) {
  .card { /* responds to .layout, not a closer container */ }
}

Unità delle container query

Le container query sbloccano anche unità relative al contenitore invece che al viewport: cqw (1% della larghezza del contenitore), cqh, cqi (inline) e cqb (block). La tipografia fluida che scala con il suo contenitore diventa una sola riga:

.card h2 {
  font-size: clamp(1rem, 5cqi, 2rem);
}

Container query vs media query

	Media query	Container query
Misura	Viewport / dispositivo	Antenato dimensionato più vicino
Setup necessario	Nessuno	container-type su un genitore
Migliore per	Layout a livello di pagina	Componenti riutilizzabili
Unità	vw, vh	cqw, cqi, ...

Supporto dei browser

Le size container query sono supportate in Chrome, Edge, Firefox e Safari attuali. Non sostituiscono le media query — usa le media query per la struttura complessiva della pagina e le container query per i componenti che devono essere portabili. Le due cose funzionano bene insieme.

Il cambio mentale è piccolo ma potente: smetti di chiedere "quanto è grande lo schermo?" e inizia a chiedere "quanto spazio ha questo componente?". Quel singolo cambiamento è ciò che rende i componenti di un design system davvero inseribili ovunque.