CSS: cosa sono le Container Query

Le Container Query sono una novità di CSS per ora supportata unicamente da Chrome 105 e presto da Safari 16, ma quali sono le loro caratteristiche e perché potrebbero risultare molto utili nella disposizione degli elementi di una pagina Web?

Cosa sono le Container Query

MDN, il sito di riferimento per la documentazione sui Web standard di Mozilla, ricorda che quando si desidera creare un design responsive vengono spesso sfruttate le Media Query con lo scopo di modificare il layout di un documento in base alle dimensioni dell'area di visualizzazione disponibile (viewport).

Detto questo, non di rado un progetto presenta elementi comuni per i quali il cambiamento del layout dipende direttamente dalla disponibilità di spazio all'interno del contenitore di riferimento. Quest'ultimo non è rapportato per forza di cose alla dimensione dell'area di visualizzazione per cui nelle Media Query assume un ruolo fondamentale la posizione dei componenti all'interno del layout.

La situazione descritta viene riassunta efficacemente dall'immagine seguente, dove due componenti rimangono bloccate nella disposizione a due colonne producendo un rendering di bassa qualità dal punto di vista grafico:

Ciò accade perché le Media Query dimensionano gli elementi in base a degli intervalli di valori, da qui una soluzione come le Container Query che invece non tengono conto delle dimensioni della viewport ma di quelle dei contenitori, o contesti degli elementi, e permettono di effettuare degli adattamenti dei componenti di pagina in base a queste ultime.

Le proprietà delle Container Query

Con le Container Query vengono inoltre introdotte tre nuove proprietà:

1. container-type: consente di definire un elemento come query container;
2. container-name: permette di specificare una lista composta da nomi di query container per le regole di @container che a sua volta crea una Container Query;
3. container: un'abbreviazione con cui impostare velocemente le proprietà precedenti.

Un esempio di Container Query

MDN propone il seguente esempio per spiegare il funzionamento delle Container Query:

@container (min-width: 700px){
  .card {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

In esso l'elemento da adattare viene mostrato in due colonne soltanto nel caso in cui la barra laterale è più larga di 700 px. Il medesimo risultato può essere ottenuto tramite grid o flex layout ma uno dei vantaggi delle Container Query risiede nel fatto che sono targettizzabili rispetto ad un contesto e possono essere riutilizzate facilmente.