Cosa sono le container query

Le Container Queries sono un nuovo tipo di at-rule che permette agli elementi di adattarsi in base alle dimensioni del loro contenitore anziché al viewport. Questa funzionalità è particolarmente utile nel responsive web design. In questo approfondimento cerchiamo di scoprire al meglio le container queries.

Cosa sono le Container Queries

Le Container Queries rappresentano un cambiamento importante nella creazione di design responsive. Tradizionalmente, le media queries si basano sulle dimensioni della viewport per applicare stili diversi. Tuttavia, con l'avvento delle architetture front-end sempre più modulari e component-based, è emersa la necessità di stili che possano adattarsi in base alle dimensioni del contenitore di un elemento, anziché dell'intera schermata. Questo approccio consente una maggiore flessibilità e riutilizzabilità dei componenti, poiché possono adattarsi in modo più fluido in contesti diversi all'interno della stessa pagina.

1.container {
2  width: 50%;
3}
4
5@container (min-width: 500px) {
6  .child {
7    background: lightblue;
8    padding: 20px;
9  }
10}

In questo esempio, oltre a cambiare colore di sfondo, .child riceve anche un padding quando il contenitore raggiunge una certa larghezza, dimostrando come gli stili possano essere finemente controllati.

Definire un contesto di riferimento con container-type

La proprietà container-type è fondamentale per stabilire su quali dimensioni del contenitore le query dovranno basarsi. Questo può essere particolarmente utile per controllare il layout in maniera più precisa, soprattutto quando si lavora con contenitori che possono cambiare dimensioni sia in larghezza che in altezza. Specificare un container-type aiuta a definire se le regole devono reagire alle variazioni di larghezza, altezza, o entrambe.

1.container {
2  container-type: block-size;
3}
4
5@container (min-block-size: 250px) {
6  .child {
7    grid-template-columns: repeat(3, 1fr);
8  }
9}

In questo esempio, la griglia all'interno di .child cambia la sua struttura quando l'altezza del .container supera i 250px.

La differenza tra block-size e inline-size l’abbiamo già affrontata con le proprietà logiche.

Dare un nome ai container con container-name

L'uso di container-name fornisce un ulteriore livello di astrazione e organizzazione. Assegnando un nome ai contenitori, è possibile riferirsi a essi in maniera specifica nelle query. Questo è particolarmente utile in progetti grandi e complessi, dove potrebbero esserci molti contenitori diversi con esigenze di stile specifiche.

1.container {
2  container-name: mainContainer;
3}
4
5@container mainContainer (min-width: 300px) {
6  .child {
7    display: flex;
8    flex-direction: column;
9  }
10}

In questo frammento, .child cambia il suo layout in flex quando mainContainer raggiunge una certa larghezza.

La shorthand container

La proprietà shorthand container è uno strumento utile per semplificare la definizione dei contenitori. Consente di impostare sia il container-type che il container-name in una sola riga, rendendo il codice più pulito e facile da leggere.

1.container {
2  container: size / mainContainer;
3}
4
5@container mainContainer (min-width: 200px) and (min-height: 400px) {
6  .child {
7    grid-area: 1 / 1 / 2 / 2;
8  }
9}

Qui, .container è definito come un contenitore che risponde sia alle variazioni di larghezza che di altezza, e il .child cambia posizione nella griglia in base a queste dimensioni.

Le unità di misura del container

Le unità di misura specifiche dei container come cw (container width) e ch (container height) offrono un modo per definire le dimensioni relative al contenitore. Queste unità sono particolarmente utili per creare design che siano veramente fluidi e adattabili alle dimensioni del contenitore, anziché fissi o basati su unità relative alla viewport.

Di queste unità e delle unità relative ne abbiamo già ampiamente parlato durante la lezione sui valori e le unità di CSS.

1@container (min-width: 25cw) {
2  .child {
3    margin: 5ch;
4    font-size: 1.5cw;
5  }
6}

In questo esempio, il margine e la dimensione del font di .child sono calcolati in base alle dimensioni del contenitore, offrendo un controllo più preciso del layout e del design.

In conclusione, le Container Queries aprono nuove possibilità nel design web responsivo, permettendo agli sviluppatori di creare componenti che non solo rispondono alle dimensioni dello schermo, ma anche al contesto in cui sono inseriti.

P.S. L'esempio del video è ispirato alla demo di Ahmad Shaded