CSS random(): cosa puoi fare oggi senza JavaScript e dove serve ancora un fallback

Sfalsare la rotazione di una serie di adesivi, dare a ogni elemento un ritardo di animazione diverso, variare la dimensione di alcune particelle decorative: finora serviva un po' di JavaScript oppure una lunga sequenza di regole :nth-child(). Con Chrome 156 arriva in CSS la funzione random(), che genera valori casuali direttamente nel foglio di stile. Chrome Status indica per la versione stabile la data del 20 ottobre 2026.

La funzione è utile, ma il suo stato è ancora quello di una novità: supporto parziale, specifica in evoluzione e qualche incoerenza nella documentazione. Qui trovi come funziona, cosa è verificato e come usarla senza rendere il layout dipendente da un solo browser.

Come funziona random()

Secondo la pagina MDN la sintassi accetta da due a quattro argomenti: una chiave opzionale, un valore minimo, un valore massimo e un passo opzionale. Minimo e massimo devono essere dello stesso tipo di dato, per esempio due angoli, due tempi, due lunghezze o due numeri. Se il massimo è inferiore al minimo, la funzione restituisce il primo valore. Con il passo, il risultato è il minimo oppure un suo multiplo, fino al massimo.

.sticker {
  rotate: random(-6deg, 6deg);
  animation-delay: random(0s, 1.2s);
}

.dial {
  /* solo multipli di 45 gradi */
  rotate: random(0deg, 360deg, 45deg);
}

Gli esempi sono costruiti sulla sintassi documentata da MDN e non li ho eseguiti nei browser: provali sul tuo progetto prima di adottarli.

La chiave: quando due valori devono coincidere

Senza chiave (valore auto) ogni chiamata produce un valore indipendente. La chiave serve quando due proprietà devono condividere lo stesso numero, per esempio larghezza e altezza di un elemento che deve restare quadrato. MDN descrive queste opzioni: element-scoped (stesso valore per le proprietà dello stesso elemento, diverso tra elementi), property-scoped (stesso valore per la stessa proprietà su tutti gli elementi), property-index-scoped, un identificatore con doppio trattino per condividere il valore a nome, e fixed seguito da un numero, che usa quel numero come seme.

.particle {
  width: random(--size element-scoped, 0.25em, 1em);
  height: random(--size element-scoped, 0.25em, 1em);
}

Qui c'è una cautela. La pagina MDN usa element-scoped nell'elenco dei parametri, ma altrove nomina element-shared, e WebKit, nelle note della Safari Technology Preview 218 (30 aprile 2025), ha sostituito match-element con element-shared per seguire una modifica della specifica. La specifica CSS Values and Units Level 5 risulta nella versione W3C che ho consultato un Working Draft del 2024, che si dichiara in fase di esplorazione. Prima di usare le parole chiave, controlla il nome corrente sulla pagina MDN. La forma più semplice, senza chiave, non dipende da questa discussione.

Supporto: cosa è verificato e cosa no

Chrome Status elenca random() tra le funzionalità di Chrome 156, con rilascio stabile programmato per il 20 ottobre 2026. MDN la classifica come disponibilità limitata, quindi non Baseline. Per Safari, un articolo di Chris Coyier del 25 agosto 2025 la descriveva come presente solo nella Technology Preview, mentre il dataset di compatibilità di MDN che ho consultato indica Safari 26.2; quel dataset segnava Chrome e Firefox come "preview", quindi non registra ancora Chrome 156. Su Firefox non ho trovato una conferma di rilascio stabile. Non ho verificato Edge né il numero esatto di versione di Safari su una fonte primaria diversa da quel dataset.

Un pattern con fallback

Il modo più sicuro è progettare la versione senza casualità come versione di base, e aggiungere la variazione solo dove il browser la capisce.

.sticker {
  rotate: 0deg;
  animation-delay: 0s;
}

@supports (rotate: random(-6deg, 6deg)) {
  .sticker {
    rotate: random(-6deg, 6deg);
    animation-delay: random(0s, 1.2s);
  }
}

Chi usa un browser senza supporto vede gli elementi allineati e animati insieme, che è un risultato accettabile per una decorazione. La stessa logica non funziona se la casualità determina il significato di un elemento: in quel caso serve ancora JavaScript, o una scelta fatta a monte.

Tre attenzioni pratiche

MDN avverte che il risultato è imprevedibile: un colore casuale può non avere contrasto sufficiente con lo sfondo, quindi i valori casuali vanno tenuti lontani da testo e da elementi informativi. Le animazioni con ritardi casuali restano animazioni, e vanno comunque ridotte o fermate per chi ha attivato prefers-reduced-motion. Infine, una custom property definita come --x: random(...) non conserva il valore: ogni var(--x) rifà la chiamata, a meno che la proprietà sia registrata con @property.

Non ho verificato se il valore resti identico tra un caricamento e l'altro della pagina. Se ti serve ripetibilità, per esempio nei test visivi, la chiave fixed con un seme esplicito è la strada indicata da MDN.

Le altre novità CSS di Chrome 156

Nello stesso elenco Chrome Status compaiono una pseudo-classe che seleziona l'elemento che ha avviato una navigazione, i valori combinati di overflow per contenitori di scorrimento su un solo asse e la parola chiave pair per scroll-snap-type. Sono funzionalità circoscritte e, al momento, descritte solo per Chrome. Di queste ho letto soltanto la descrizione di Chrome Status, quindi non ho esempi verificati da proporre.

Quando vale la pena adottarla

Ha senso per la variazione decorativa, dove il fallback uniforme non rovina il progetto. Per tutto il resto conviene aspettare che il supporto si estenda e che la specifica si stabilizzi.

Fonti

1. Chrome Status, “Note di rilascio Chrome 156”, stable programmata 20 ottobre 2026
2. Chrome for Developers, “Chrome 156 beta”, 30 settembre 2026
3. MDN, “random() CSS function”
4. MDN browser-compat-data, “css.types.random”
5. W3C, “CSS Values and Units Module Level 5 (Working Draft)”
6. WebKit, “Release Notes for Safari Technology Preview 218”, 30 aprile 2025
7. Chris Coyier, “Very Early Playing with random() in CSS”, 25 agosto 2025