veilletech.fr
21 oct. Feed du jour
#08 CSS Article

CSS : random() arrive dans Safari et Chrome 156

Du hasard en CSS pur, tant qu'il reste décoratif.

La fonction CSS random() de la spécification CSS Values and Units 5 est livrée dans Safari et en cours de déploiement dans Chrome 156, avec des signaux positifs côté Firefox. Elle produit un nombre aléatoire entre deux bornes de même unité, avec un pas optionnel et une clé de cache pour que plusieurs propriétés partagent la même valeur. À protéger par @supports et à tempérer avec prefers-reduced-motion.

2 min de lecturedébutantvidéo 1:16
Partager
Sommaire5 sections
  1. Ce qui se passe
  2. La syntaxe
  3. Les deux règles qui font perdre du temps
  4. Comment s'y prendre sans abîmer son design system
  5. À retenir

Ce qui se passe

Pour donner un air un peu moins mécanique à une interface (des lettres légèrement penchées, des cartes éventées), il fallait du JavaScript ou une boucle de préprocesseur qui produit des centaines de lignes de CSS figé. La fonction random() de la spécification CSS Values and Units Level 5 le fait dans la feuille de style. Selon Brecht De Ruyte, auteur de l'article de Smashing Magazine, Safari l'a livrée en premier, Chrome la déploie avec la version 156, et Mozilla a donné des signaux positifs pour Firefox. L'état des navigateurs est celui que rapporte l'auteur : à confirmer dans les notes de version.

La syntaxe

La spécification écrit random(<clé de cache>?, <min>, <max> [, by <pas>]?). L'auteur note que les implémentations actuelles acceptent simplement des arguments séparés par des virgules :

CSS
/* Un angle entre -3deg et 3deg */
rotate: random(-3deg, 3deg);

/* Une largeur entre 20px et 80px, par pas de 10px */
inline-size: random(20px, 80px, 10px);

/* Une durée d'animation variable */
animation-duration: random(1.5s, 3s, 0.2s);

Les deux règles qui font perdre du temps

Mêmes unités aux deux bornes. random(-4deg, 4deg) et random(0.3, 1) passent ; random(2rem, 100px) est invalide. Pour mélanger des unités, passer par calc().

Chaque appel est indépendant. Une largeur et une hauteur tirées séparément donnent un rectangle quelconque. Pour obtenir un carré, on leur donne la même clé de cache, un nom de variable CSS, et elles reçoivent le même tirage :

CSS
.tuile {
  inline-size: random(--cote, 40px, 120px);
  block-size: random(--cote, 40px, 120px);
}

Le pas arrondit le tirage : random(0px, 60px, 15px) ne produit que 0, 15, 30, 45 ou 60 px, utile pour que les éléments restent sur une grille. La spécification prévoit aussi random-item(), qui choisit dans une liste de valeurs plutôt que dans un intervalle.

Comment s'y prendre sans abîmer son design system

  1. Protéger les essais, le déploiement n'étant pas terminé :

    CSS
    @supports (rotate: random(-2deg, 2deg)) {
  .carte { rotate: random(-2deg, 2deg); }
}

  2. Réserver le hasard à des éléments décoratifs (un titre, une carte, une pile de vignettes) plutôt qu'à la mise en page.

  3. Respecter prefers-reduced-motion : l'auteur recommande d'aplatir aussi les angles, pas seulement les animations, car beaucoup d'angles aléatoires peuvent gêner en défilant.

    CSS
    @media (prefers-reduced-motion: reduce) {
  .carte { rotate: 0deg; animation: none; }
}

Source : Smashing Magazine, 20 octobre 2026. Source en anglais.