CSS random() sort du seul Safari

Ce qui se passe

Fin 2025, Safari est devenu le premier — et pour l'instant le seul — navigateur à implémenter la fonction CSS random(), dans une mise à jour qui revendiquait de « résoudre des cas d'usage courants avec HTML et CSS seuls » et de réduire le recours à JavaScript. Un demi-tour de calendrier plus tard, Chrome et Firefox y travaillent sans date ni drapeau annoncé.

Lee Meyer a donc écrit un polyfill, publié sous le paquet npm css-random-polyfill, testé sur des forks des démonstrations du blog WebKit (le champ d'étoiles, la grille colorée). Les utilisateurs de Safari eux-mêmes peuvent y trouver un intérêt : les mises à jour du navigateur sont liées à celles du système, et tout le monde ne peut pas passer à la dernière version.

Comment s'y prendre

Deux contraintes structurent l'usage. Il faut charger le script et marquer les éléments concernés d'une classe randomized :

HTML

<script src="https://unpkg.com/css-random-polyfill@latest/dist/css-random-polyfill.js"></script>
<div class="star randomized"></div>

Et il faut stocker chaque valeur aléatoire dans une propriété personnalisée intermédiaire dont le nom commence par --random :

CSS

.star {
  --random-star-size: random(1px, 7px, 1px);
  --random-top: random(0%, 100%);
  --random-left: random(0%, 100%);
  --random-hue: random(0, 360);
  width: var(--random-star-size);
  top: var(--random-top);
  left: var(--random-left);
}

C'est plus cérémonieux que la syntaxe native, qui autorise random() « à la place de n'importe quelle partie de la valeur d'une propriété », comme calc() ou min(). Le bon côté de ce compromis : le CSS écrit ainsi reste valide pour l'implémentation native. Quand le support sera généralisé, il suffira de supprimer la ligne de script — c'est déjà ce qui se passe sous Safari, où le polyfill détecte le support natif et laisse le navigateur travailler.

Le partage de valeur entre propriétés fonctionne, avec les clés (random(--side, 40px, 100px)) comme avec element-shared pour donner le même tirage à tous les éléments d'un ensemble.

À retenir

Limite technique connue : le polyfill ne traite que les styles calculés appliqués au chargement de la page. Une valeur aléatoire dans des @keyframes déclenchés plus tard doit être déplacée dans une classe posée au chargement. Un MutationObserver reste une piste, pas une implémentation.
Limite de spécification : random() appartient à un editor's draft en phase d'exploration précoce, où « des changements de rupture majeurs sont attendus ». La syntaxe est déjà subtile à cause des règles de mise en cache et de clé des valeurs. À réserver au décoratif — confettis, dispersion, animations d'ambiance — pas à ce dont dépend une page.
L'argument de fond est celui de la règle de la moindre puissance citée par Alvaro Montoro : résoudre un problème dans le langage le moins puissant capable de l'exprimer. Disperser des éléments à l'écran relève de la présentation, donc du CSS, pas d'une dépendance JavaScript de plus.

Source : CSS-Tricks — Let's Use the Emergent CSS random() Function in all the Browsers