CSS Container Queries: il layout responsive che si adatta al contenitore, non allo schermo

Per anni, quando si è parlato di responsive design in CSS, il riferimento è stato quasi sempre la larghezza della finestra del browser, controllata con le media query. Funziona bene per il layout generale di una pagina, ma mostra i suoi limiti quando si costruiscono componenti riutilizzabili: una card, una sidebar, un widget che deve adattarsi allo spazio che gli viene dato, non allo schermo dell'utente. Le CSS Container Queries risolvono proprio questo problema, e nel 2026 sono ormai una tecnologia matura, supportata da tutti i principali browser moderni.

In questo articolo vediamo cosa sono, come si usano in pratica e in quali casi convivono con le media query invece di sostituirle.

Cosa sono le container query e perché servono

Una container query applica delle regole CSS a un elemento in base alle dimensioni (o allo stile) del suo elemento contenitore, invece che della viewport. In pratica: se metti la stessa card in una colonna larga e in una sidebar stretta, la card può cambiare automaticamente layout, dimensione del testo o disposizione degli elementi in base allo spazio reale disponibile intorno a lei, indipendentemente dalla larghezza totale dello schermo.

Questo è ciò che rende possibile un vero design a livello di componente: lo stesso blocco di codice HTML/CSS può essere riutilizzato in punti diversi di un sito, e si comporterà in modo intelligente ovunque venga inserito.

Come attivare un contenitore: container-type e container-name

Perché un elemento possa essere "interrogato" dai suoi figli, deve prima essere dichiarato come contenitore di query con la proprietà container-type:

• inline-size: il caso più comune, permette query basate solo sulla larghezza (dimensione inline) del contenitore.
• size: abilita query sia sulla larghezza sia sull'altezza, ma richiede che l'altezza del contenitore sia definita esplicitamente, altrimenti il contenuto rischia di collassare.
• normal: valore di default, il contenitore non risponde a query dimensionali ma può comunque essere usato per query basate solo sul nome o sullo stile.

Un esempio minimo:

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

Se in una pagina ci sono più contenitori annidati, è utile distinguerli con container-name, così le regole successive sanno a quale contenitore riferirsi:

.post {
  container-type: inline-size;
  container-name: articolo;
}

Le due proprietà si possono scrivere anche in forma abbreviata con la sintassi container: nome / tipo;, ad esempio container: articolo / inline-size;.

La sintassi @container in pratica

Una volta definito il contenitore, si scrivono le regole con la at-rule @container, molto simile nella forma a @media:

@container (width > 700px) {
  .card h2 {
    font-size: 2em;
  }
}

Se si vuole puntare a un contenitore specifico tra più annidati, si aggiunge il nome prima della condizione:

@container articolo (width > 700px) {
  .card { font-size: 2em; }
}

Un caso pratico frequente è una card che deve mostrare titolo e immagine impilati quando lo spazio è stretto (per esempio in una sidebar) e affiancati quando il contenitore è più largo (per esempio nel corpo centrale di una pagina): lo stesso identico markup HTML cambia comportamento automaticamente, senza bisogno di classi diverse o di JavaScript.

Le unità di misura relative al contenitore

Quando un elemento è un contenitore di tipo size o inline-size, diventano disponibili delle unità di misura dedicate, pensate per dimensionare font, spaziature o elementi in proporzione al contenitore invece che alla viewport:

• cqw: l'1% della larghezza del contenitore.
• cqh: l'1% dell'altezza del contenitore.
• cqi: l'1% della dimensione inline del contenitore (di norma la larghezza, nelle lingue con scrittura orizzontale).
• cqb: l'1% della dimensione block del contenitore (di norma l'altezza).
• cqmin: il valore più piccolo tra cqi e cqb.
• cqmax: il valore più grande tra cqi e cqb.

Un esempio tipico è un titolo che cresce in modo fluido in proporzione allo spazio disponibile, combinando le unità cq con clamp() o max():

.card h2 {
  font-size: max(1.5em, 1.23em + 2cqi);
}

Se un elemento non ha un contenitore antenato valido, queste unità ricadono per sicurezza sulle unità equivalenti della viewport, evitando che il layout si rompa.

Le container style query: un passo oltre le dimensioni

Accanto alle query dimensionali, la specifica introduce anche le container style queries, che permettono di applicare regole in base allo stile del contenitore (ad esempio il valore di una custom property CSS), non solo alle sue dimensioni: @container style(--tema: scuro) { ... }. È una funzionalità più recente e, a differenza delle query dimensionali ormai stabili ovunque, ha ancora un supporto parziale: pienamente disponibile su Firefox, e con supporto solo parziale su Chrome, Edge e Safari. Per un uso in produzione oggi conviene quindi limitarsi alle query dimensionali e trattare le style query come una tecnica emergente da testare con attenzione.

Supporto dei browser nel 2026

Le container query dimensionali (quelle basate su container-type: size o inline-size) sono ormai considerate una tecnologia solida: sono supportate da Chrome ed Edge dalla versione 106, da Safari dalla versione 16, da Firefox dalla versione 110, oltre che dalle rispettive versioni mobile (Safari iOS, Chrome per Android, Samsung Internet, Firefox per Android). Il supporto globale supera oggi il 94% degli utenti, restando assente solo su browser legacy o di nicchia come Internet Explorer, Opera Mini o alcuni browser Android regionali (UC Browser, QQ Browser, Baidu Browser). Per la maggior parte dei progetti web moderni, quindi, le container query dimensionali si possono usare senza particolari cautele, prevedendo eventualmente un fallback via flexbox o grid per il pubblico residuo su browser molto datati.

Container query o media query: quando usare cosa

Le due tecniche non sono in competizione, ma rispondono a esigenze diverse:

• Le media query restano la scelta giusta per il layout generale della pagina: numero di colonne, visibilità di un menu, comportamento dell'intera griglia in base alla viewport.
• Le container query sono la scelta giusta per i singoli componenti che devono essere riutilizzabili e "consapevoli" dello spazio in cui vengono inseriti: card, widget, blocchi di un design system, elementi di una sidebar.

Nei progetti reali le due tecniche convivono tranquillamente: le media query definiscono l'impalcatura della pagina, mentre le container query rifiniscono il comportamento dei componenti al suo interno. È un cambio di prospettiva utile soprattutto per chi lavora con design system e librerie di componenti, dove lo stesso blocco di interfaccia deve funzionare bene ovunque venga collocato.

Conclusioni

Le CSS Container Queries colmano un vuoto storico del CSS responsive: la possibilità di far ragionare un componente in base al proprio spazio reale, non solo alla finestra del browser. Con un supporto browser ormai maturo per le query dimensionali, è un buon momento per iniziare a introdurle nei propri progetti, magari partendo da un singolo componente (una card, un box informativo) prima di estenderle a un intero design system. Le style query, ancora in fase di adozione, sono invece da tenere d'occhio per il futuro prossimo.

Fonti ufficiali

• MDN Web Docs – CSS container queries
• MDN Web Docs – Using container size and style queries
• Can I use – CSS Container Queries (Size)
• Can I use – CSS Container Style Queries