Quali funzioni e proprietà CSS moderne semplificano il layout (clamp, aspect-ratio, subgrid)?

Question

Accepted Answer

CSS moderno ha aggiunto funzioni e proprietà che sostituiscono intere categorie di hack basati su media query e JavaScript. I principali:

## clamp() — valori fluidi e limitati

```css
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
/*               │       │     └── maximum (never bigger than 3rem) */
/*               │       └──────── preferred (scales with viewport) */
/*               └──────────────── minimum (never smaller than 1.5rem) */
```

`clamp(min, preferred, max)` fornisce **tipografia/spaziatura fluida** che si scala uniformemente con il viewport ma rimane entro i limiti — sostituendo diversi breakpoint di media query di `font-size` con una sola riga.

## aspect-ratio — mantenere le proporzioni

```css
.video { aspect-ratio: 16 / 9; width: 100%; } /* height auto-computed to keep 16:9 */
.avatar { aspect-ratio: 1; }                    /* perfect square at any width */
```

Prima di questa proprietà, mantenere un box reattivo 16:9 richiedeva il famigerato hack `padding-bottom: 56.25%`. Ora è una sola dichiarazione — e riserva spazio (buono per CLS) prima che le immagini si carichino.

## min() / max()

```css
.container { width: min(90%, 1200px); } /* whichever is SMALLER → fluid but capped */
.box { padding: max(1rem, 3vw); }       /* whichever is LARGER → a minimum floor */
```

`min()`/`max()` scelgono il valore minore/maggiore tra i valori, permettendo a una proprietà di essere reattiva senza media query (es. "90% di larghezza, ma mai più di 1200px").

## subgrid — allineare grid annidati

```css
.card { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
```

`subgrid` permette a un grid annidato di **ereditare le linee di track del padre**, quindi gli elementi su card separate (titoli, corpi, pulsanti) si allineano perfettamente su righe condivise — precedentemente impossibile senza altezze fisse.

## gap ovunque & helper logici

```css
.flex { display: flex; gap: 1rem; }   /* gap now works in flexbox, not just grid */
```

## Perché è importante

Queste proprietà eliminano hack consolidati: `clamp()`/`min()`/`max()` sostituiscono pile di media query per il sizing fluido, `aspect-ratio` sostituisce l'hack del padding e protegge lo shift del layout, e `subgrid` risolve l'allineamento tra componenti.

Rendono i layout reattivi e proporzionali drammaticamente più semplici e robusti — CSS moderno fa in modo dichiarativo quello che prima richiedeva JS o trick fragili.