Nella versione per sviluppatori di Chrome si possono abilitare finalmente le Container Queries, una soluzione che potrebbe cambiare alcuni principi fondamentali sullo sviluppo CSS dei componenti.

Nel sondaggio State Of CSS viene richiesto da alcuni anni quale sia la funzionalità mancante nello sviluppo CSS, e da alcuni anni al primo posto ci sono le Container Queries, che sono di fatto entrate ufficialmente nelle bozze di specifiche del W3C nella sezione CSS Containment.
Recentemente queste specifiche hanno ricevuto la loro prima implementazione nella versione Canary di Chrome, abilitabile tramite flag.

A cosa servono?

Nello sviluppo moderno di interfaccie web ci si aspetta che ogni componente sia autonomo rispetto al resto del layout, in modo che possa essere aggiunto, rimosso o spostato senza interferire con gli altri componenti della stessa pagina; un'altra caratteristica che il componente deve avere è di essere responsivo: al cambiare della situazione generale in cui viene inserito, deve adattarsi di conseguenza; una di queste situazioni è relativa alla spazio a disposizione, che non sempre corrisponde alla larghezza della pagina.
Le Container Queries servono proprio a questo: consentire di dare al componente un comportamente responsivo che sia relativo alla dimensione dell'area in cui viene inserito, ma senza specificare quale sia questa area rendendolo di fatto indipendente dalla definizione del layout.

Come facciamo adesso?

Ipotizziamo di avere un elemento con un titolo che cambia dimensione in relazione alla larghezza, 36px se lo spazio è ampio, 18px se lo spazio è ristretto

.box > h2 {
    font-size: 18px
}
@media (min-width: 400px) {
    .box > h2 {
        font-size: 36px
    }
}

Questo va benissimo se il .box si trova nell'area che occupa tutta la larghezza della pagina, me se lo stesso box lo voglio usare all'interno della sidebar, oppure in un trittico di elementi a fondo pagina?
Le soluzioni che possiamo attualmente adottare sono comunemente due:
specificare la cascata

.box > h2 {
    font-size: 18px
}
@media (min-width: 400px) {
    .box > h2 {
        font-size: 36px
    }
}
.sidebar .box > h2 {
    font-size: 18px
}

In questo caso abbiamo sia il problema di avere per lo stesso elementi selettori con specificità diverse, sia di dare per scontanto che la sidebar in cui verrà inserito avrà classe .sidebar

Le seconda soluzione riguarda l'utilizzo di un modificatore.

.box > h2 {
    font-size: 18px
}
@media (min-width: 400px) {
    .box > h2 {
        font-size: 36px
    }
}
.box--small > h2 {
    font-size: 18px
}

in questo caso l'associazione del modificatore richiede che il componente sia in qualche modo parametrizzabile, se ad esempio lo stiamo gestendo con un framework reattivo, oppure con un CMS.

Un problema comune di entrambe le soluzione è che se un domani l'area di riferimento cambiasse la sua dimensione, diventando molto più larga, sarebbe necessario intervenire anche sui componenti che si trovano all'interno.

Come funzionano le Container Queries?

La prima cosa da sapere è che dobbiamo definire quali elementi del layout possiamo indentificare come contenitori in modo che la nostra query sappia a cosa fare riferimento, ad esempio potrebbe essere la sidebar della pagina, o la cella di una griglia:

.sidebar,
.grid-cell {
    contain: layout inline-size;
}

Questi due valori assegnano agli elementi un containment context, a cui i figli potranno fare riferimento

Passiamo ora alla query vera e propria, gestita dalla @-rule container

.box > h2 {
    font-size: 18px
}

@container (min-width: 400px) {
    .box > h2 {
        font-size: 36px
    }
}

L'esempio è piuttosto elementare ma esplicativo: il titolo dell'elemento .box aumenta la sua grandezza se il suo contenitore è largo almeno 400px, in maniera del tutto indipendente dalla larghezza della pagina, dallo schermo dell'utente, dal nome del contenitore o dalla situazione attuale del layout.

Se volete approfondire l'argomento e guardare qualche esempio pratico vi consiglio questi link:

• https://codepen.io/collection/XQrgJo
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
• https://ishadeed.com/article/say-hello-to-css-container-queries/
• https://www.oddbird.net/2021/04/05/containerqueries/

Ricordate sempre che per vedere gli esempi in funzione dovete avere la versione Canary di Chrome con il flag attivo.