La funzione CSS progress() è ora supportata da tutti i principali browser: Chrome dalla versione 138, Firefox dalla 155 e Safari dalla 27. Permette di calcolare in quale punto di un intervallo si trova un valore, ed è uno strumento molto pratico per creare interfacce che si adattano in modo fluido alla larghezza dello schermo.

Come funziona

La sintassi prevede tre argomenti: il valore da misurare, l'inizio e la fine dell'intervallo. Il risultato è un numero normalmente compreso tra 0 e 1:

progress(100vw, 320px, 1200px)

Con una finestra larga 320 pixel il risultato è 0, a 1200 pixel è 1, a 760 pixel è 0,5. Sotto e sopra l'intervallo il valore resta bloccato rispettivamente a 0 e 1.

Esempio 1: opacità che cresce con lo schermo

.card {
  opacity: progress(100vw, 320px, 1200px);
}

Esempio 2: un unico fattore per più proprietà

Il vantaggio rispetto a clamp() emerge quando più proprietà devono crescere insieme. Salvando il risultato in una variabile, titolo e spaziature restano proporzionati tra loro:

.hero {
  --grow: progress(100vw, 375px, 1440px);
  padding-block: calc(2rem + 4rem * var(--grow));
}

.hero h1 {
  font-size: calc(1.75rem + 1.75rem * var(--grow));
}

Su uno smartphone di 375 pixel il titolo misura 1,75rem e il padding 2rem; su uno schermo di 1440 pixel diventano rispettivamente 3,5rem e 6rem, con una crescita continua nelle dimensioni intermedie.

Esempio 3: un'alternativa per i browser meno recenti

Il supporto completo è recente: per chi usa un browser non aggiornato conviene prevedere un valore di riserva con @supports:

.hero h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3.5rem);
}

@supports (opacity: progress(1, 0, 2)) {
  .hero h1 {
    font-size: calc(1.75rem + 1.75rem * var(--grow));
  }
}

Quando usarla

  • Per legare più proprietà allo stesso intervallo di larghezze, mantenendo le proporzioni
  • Per transizioni graduali di opacità, colori o spaziature in base allo spazio disponibile
  • Quando servono valori calcolati in modo leggibile, senza formule difficili da mantenere

Firefox 155 e Safari 27 supportano inoltre l'opzione no-clamp, che consente di ottenere valori anche fuori dall'intervallo 0–1: utile per effetti particolari, ma da usare con attenzione finché il supporto non sarà uniforme su tutti i browser.