Prendi una scheda prodotto. Nella colonna principale ha spazio per stare in orizzontale, con l’immagine a sinistra e il testo a destra. Spostata in una barra laterale stretta diventa un disastro, anche se lo schermo è lo stesso. Le media query non possono aiutarti, perché guardano la larghezza della finestra, non quella dello spazio in cui il componente si trova.
Le container queries risolvono proprio questo: permettono di adattare un componente alla larghezza del suo contenitore. Da fine estate sono supportate da Chrome ed Edge 105 e da Safari 16, mentre Firefox ci sta lavorando. Per ora conviene usarle come miglioramento progressivo, con uno stile di base che funziona anche senza.
Prima dichiari quale elemento fa da contenitore, poi scrivi le regole in base alla sua larghezza:
.colonna { container-type: inline-size; }
@container (min-width: 400px) {
.scheda { display: grid; grid-template-columns: 1fr 2fr; }
}La scheda resta verticale negli spazi stretti e diventa orizzontale in quelli ampi, ovunque la metti, senza classi speciali per ogni posizione. Con le nuove unità relative al contenitore, come cqi, puoi anche dimensionare caratteri e spaziature in proporzione allo spazio disponibile.
Meno varianti da mantenere
Il vantaggio si sente soprattutto nei sistemi di design. Un componente che si comporta bene da solo in qualsiasi area della pagina richiede meno varianti da documentare e da tenere allineate. Nei CMS e nei page builder, dove l’utente trascina blocchi in colonne di larghezza imprevedibile, significa meno sorprese quando il cliente decide di mettere tre schede affiancate in una sezione pensata per una.
Le media query non vanno in pensione. Restano lo strumento giusto per il layout generale, come il numero di colonne o la navigazione. Le container queries governano il comportamento dei singoli componenti, e le due tecniche lavorano bene insieme.
Per cominciare, scegli un componente che usi in più posizioni, una scheda o un box di riepilogo. Scrivigli uno stile di base solido, aggiungi una sola regola @container e provalo su Chrome o Safari aggiornati spostandolo tra colonna principale e barra laterale. Su Firefox vedrai lo stile di base: è esattamente quello che deve succedere, finché il supporto non arriva.
