Layout responsive senza media query

Un sito con dieci media query ha, di fatto, dieci layout diversi da mantenere, e tra un breakpoint e l'altro il layout resta fisso, ignorando tutto lo spazio intermedio. L'alternativa, che negli ultimi anni CSS ha reso praticabile, è progettare layout che si adattano in modo continuo, usando le informazioni che il browser già conosce, come la dimensione dello schermo e quella del contenuto, senza dettare punti di rottura precisi.

1. Il pattern RAM: colonne che si contano da sole

Il team Google web.dev chiama questa combinazione «RAM pattern», dall'acronimo di Repeat, Auto(-fit), Minmax: tre funzioni Grid già viste separatamente, che insieme calcolano da sole quante colonne servono, senza una sola media query.

.griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

Il browser ricalcola il numero di colonne a ogni ridimensionamento della finestra: una sola riga di CSS sostituisce quattro o cinque blocchi @media con soglie fisse arbitrarie.

Fonte: web.dev (Google), «One-line layouts»: la combinazione di repeat, auto-fit/auto-fill e minmax (l'acronimo RAM) crea layout a griglia responsivi che calcolano automaticamente il numero di colonne.

2. clamp(): la scala continua, non a scatti

Lo stesso principio si applica alla tipografia, come visto nella pillola sulle unità CSS: clamp(min, preferito, max) fa crescere un valore con continuità tra due estremi, invece di saltare da una dimensione fissa all'altra a ogni breakpoint.

h1 {
  font-size: clamp(1.75rem, 4vw + 1rem, 3.5rem);
}

Il vantaggio, qui applicato al layout intero e non solo al testo: niente scatto percepibile quando la finestra attraversa un breakpoint, semplicemente perché non ci sono breakpoint da attraversare.

3. Intrinsic sizing: dimensionare in base al contenuto stesso

Oltre a px o %, CSS offre parole chiave che chiedono al browser di guardare il contenuto reale per decidere la dimensione: è l'essenza del design «intrinseco».

min-content: restringe l'elemento al minimo possibile; per il testo, va a capo a ogni occasione, occupando solo la larghezza della parola più lunga.

max-content: espande l'elemento quanto serve per mostrare il contenuto senza mai andare a capo, anche a costo di causare overflow.

fit-content: la via di mezzo intelligente, usa lo spazio disponibile ma senza mai scendere sotto min-content né superare max-content.

.etichetta {
  width: fit-content;   /* larga quanto il testo, non un pixel di piu' */
}

.colonna-titolo {
  grid-template-columns: max-content 1fr;  /* prima colonna larga quanto serve */
}

Un pulsante con width: fit-content è largo esattamente quanto il suo testo: cambia lingua, cambia lunghezza del testo, il pulsante si adatta da solo, senza che tu debba ricalcolare nulla.

Fonte: MDN Web Docs, «fit-content»: rappresenta una dimensione che si adatta al contenuto restando entro i limiti del container, mai più piccola di min-content né più grande di max-content.

In sintesi

Questo modo di lavorare ha anche un nome, diffuso nella comunità CSS a partire dalla designer Jen Simmons: «intrinsic web design», cioè progettare a partire da ciò che il contenuto e lo spazio sono già, invece di imporre punti di rottura arbitrari decisi a tavolino. Le media query non spariscono, restano utili per cambi di layout più radicali, ma smettono di essere il primo strumento a cui affidarsi.