Layout responsive senza media query
clamp(), auto-fit, intrinsic sizing: fluid grid e RAM pattern
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.
Un abito su misura per tre taglie fisse (S, M, L) sta bene solo a chi rientra esattamente in una di quelle taglie, mentre chiunque sia nel mezzo si arrangia. Un tessuto elastico, invece, si adatta con continuità a ogni corpo, senza taglie intermedie scomode. I layout intrinseci sono il tessuto elastico del CSS.
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.
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.
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.
Commenti (0)
Registrati per commentare, fare domande e proporre l'argomento della prossima pillola (oppure accedi se hai già un account).
Nessun commento. Sii il primo a scrivere qualcosa.