Container queries: stile basato sulla dimensione del container

Le Media Queries (@media) hanno governato il Responsive Design per 15 anni. Ma hanno sempre avuto un difetto logico: reagiscono solo alla larghezza dell’intero schermo (il viewport).

Immagina di aver creato una bellissima “Card Articolo”. Se lo schermo è grande, la card ha l’immagine a sinistra e il testo a destra. Se lo schermo è piccolo (smartphone), l’immagine va sopra e il testo sotto. Tutto funziona finché metti questa Card nella pagina principale. Ma se un giorno decidi di inserire quella stessa Card in una Sidebar laterale stretta su desktop? Lo schermo del PC sarà larghissimo (diciamo 1920px), quindi la Media Query scatterà e la card cercherà di mostrare immagine e testo affiancati… all’interno di una sidebar strettissima, rompendosi!

Ciò di cui abbiamo bisogno non è chiedere “Quanto è grande lo schermo?”, ma “Quanto è grande la SCATOLA in cui mi trovo in questo momento?”.

La risposta a questa preghiera si chiama Container Queries.

Come usare le Container Queries

Creare una Container Query richiede due step.

1. Dichiarare un Contenitore (Il Genitore)

Per motivi di performance, il browser non ascolta le variazioni di dimensione di tutti gli elementi della pagina. Devi dirgli tu quale contenitore deve essere “ascoltato”.

.sidebar {
  /* Diciamo al browser: "Tieni d'occhio la larghezza inline di questa sidebar" */
  container-type: inline-size;
  /* (Opzionale) Diamogli un nome per riconoscerlo */
  container-name: contenitore-laterale; 
}

2. Creare la Query per il Figlio

Ora, all’interno del CSS della tua Card, invece di usare @media, usi @container.

.card-articolo {
  display: flex;
  flex-direction: column; /* Default: impilata */
}

/* "Se la TUA SCATOLA GENITORE è larga almeno 400px..." */
@container (min-width: 400px) {
  .card-articolo {
    flex-direction: row; /* ...Allora affianca gli elementi! */
  }
}

Il cambio di paradigma (Micro-Layout)

Con le Container Queries cambia tutto. I tuoi componenti (Card, Navbar, Form) diventano moduli indipendenti e auto-coscienti.

Non devi più preoccuparti di dove inserirai la tua Card. Che tu la metta in una griglia gigante, in una colonna di un carosello o in una sidebar, la Card “guarderà” lo spazio effettivo che ha a disposizione in quel momento e cambierà forma per adattarsi al meglio!

Sebbene le Media Queries @media rimangano essenziali per i Macro-Layout (la struttura generale della pagina), per tutto ciò che riguarda i componenti individuali le @container stanno rapidamente diventando il nuovo standard di riferimento per gli sviluppatori web di fascia alta.

Esercizi

Base · facile

Per usare @container su una card dentro una .sidebar, quale proprietà devi dichiarare prima sul contenitore?

.sidebar { container-type: inline-size; }

Intermedio · medio

Crea una card che passa da impilata ad affiancata quando il suo contenitore supera 400px (non lo schermo). Verifica il vantaggio mettendo la stessa card una volta a piena larghezza e una volta in una sidebar stretta su desktop.

Sfida · difficile

Spiega il limite logico delle media query che le container query risolvono (componente che reagisce allo schermo invece che alla scatola che lo contiene). Indica quando continuare a usare @media (macro-layout) e quando preferire @container (componenti riutilizzabili), e descrivi un componente che trae beneficio concreto dal passaggio.