Explorer la fonction CSS random()

Le CSS s’est toujours appuyé sur JavaScript lorsque l’aléatoire était nécessaire — positions dispersées, délais d’animation variés, changements de couleurs imprévisibles. Cette dépendance pourrait bientôt diminuer. La fonction CSS random(), qui fait partie de la spécification CSS Values and Units Module Level 5, permet aux feuilles de style de générer des valeurs numériques aléatoires directement, sans nécessiter de script.

Elle est expérimentale. Le support navigateur est limité. Mais elle mérite d’être comprise dès maintenant.

Ce que fait réellement la fonction CSS random()

L’idée principale est simple : vous définissez une valeur minimale, une valeur maximale et éventuellement un incrément de pas. Le CSS choisit un nombre dans cette plage et l’applique.

.card {
  top: random(5rem, 20rem);        /* n'importe quelle valeur entre 5rem et 20rem */
  rotate: random(0deg, 360deg);    /* rotation aléatoire */
  animation-delay: random(0s, 3s); /* timing d'animation échelonné */
}

C’est tout. Pas de Math.random(), pas de styles en ligne, pas de boucles JavaScript générant des centaines de règles :nth-child().

Une contrainte importante : tous les arguments doivent partager le même type d’unité. Vous ne pouvez pas mélanger rem avec px ou % avec em. Choisissez une unité et restez cohérent.

La syntaxe

random(<caching-options>?, <min>, <max>, [by <step>]?)

Le projet de spécification actuel définit la fonction de manière plus formelle, mais cette forme simplifiée est le moyen le plus facile de la comprendre en pratique.

Le paramètre by contrôle le pas. Sans lui, vous pouvez obtenir des valeurs décimales comme 13.47px. Avec lui, vous contraignez la sortie à une séquence prévisible :

/* Valeurs possibles : 10px, 20px, 30px, 40px, 50px */
padding: random(10px, 50px, by 10px);

Note : la valeur maximale n’est pas toujours atteignable lors de l’utilisation de pas. random(100px, 200px, by 30px) ne peut produire que 100px, 130px, 160px ou 190px — jamais 200px.

Contrôler comment l’aléatoire est partagé

C’est ici que la fonction CSS random() devient véritablement intéressante. Par défaut, chaque instance de random() dans une feuille de style se résout en une valeur unique mise en cache partagée par tous les éléments utilisant ce style.

Pour donner à chaque élément sa propre valeur unique, utilisez le mot-clé per-element ou un identifiant avec tirets :

/* Chaque élément obtient sa propre valeur aléatoire */
.item {
  top: random(per-element, 2rem, 15rem);
}

/* Les deux propriétés partagent la même valeur au sein d'un même élément */
.box {
  width: random(--size, 100px, 200px);
  height: random(--size, 100px, 200px); /* correspond à width */
}

/* Tous les éléments correspondants partagent la même valeur nommée globalement */
.badge {
  width: random(--element-shared, 50px, 150px);
}

Le mot-clé per-element est une option de mise en cache intégrée qui indique au navigateur de résoudre une valeur aléatoire distincte pour chaque élément correspondant au sélecteur. Un identifiant avec tirets comme --size lie plusieurs appels random() ensemble afin qu’ils se résolvent à la même valeur au sein d’un élément donné — utile lorsque vous voulez un carré avec une largeur et une hauteur aléatoires mais cohérentes. Un identifiant avec tirets comme --element-shared peut également agir comme une clé de cache nommée entre les éléments correspondants.

Ce système de mise en cache est délibéré et bien conçu — mais c’est aussi là que la confusion tend à s’installer. Le comprendre tôt vous évite du temps de débogage plus tard.

CSS random() vs. SCSS random()

Si vous avez utilisé random() dans Sass, le comportement diffère de plusieurs manières clés :

CSS random() génère une nouvelle valeur à chaque chargement de page. SCSS verrouille la valeur au moment de la compilation. Elles servent des objectifs différents.

Support navigateur

Début 2026, random() en CSS a été implémenté dans Safari 26.2. Un support multi-navigateurs plus large n’est pas encore garanti, vous devriez donc toujours le traiter comme une fonctionnalité expérimentale et utiliser @supports pour une amélioration progressive avec une solution de repli sensée :

.element {
  top: 10rem; /* solution de repli */
}

@supports (top: random(1rem, 5rem)) {
  .element {
    top: random(5rem, 20rem);
  }
}

Le CSS Working Group a adopté la fonction en 2022, et la spécification continue d’évoluer. Des questions ouvertes demeurent, et la syntaxe finale pourrait encore changer avant une implémentation large.

Conclusion

La fonction CSS random() ne remplacera pas JavaScript pour l’aléatoire piloté par la logique ou tout ce qui nécessite une imprévisibilité cryptographique. Mais pour la variation purement visuelle — mises en page dispersées, timing d’animation organique, arrière-plans génératifs — c’est une solution propre et déclarative qui a sa place dans la feuille de style.

Essayez-la dans Safari 26.2, gardez des solutions de repli en place, et suivez l’évolution de la spécification. L’écart entre expérimental et largement disponible se réduit.

FAQ

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.