# CSS \`random()\` : doser l’imperfection dans les interfaces

Source canonique : [CSS \`random()\` : doser l’imperfection dans les interfaces](<https://sebastien.rigaux.be/veille/liens/css-random-doser-limperfection-dans-les-interfaces>)

La fonction CSS `random()` ajoute des variations visuelles directement dans le navigateur, sans JavaScript ni boucles Sass. Brecht De Ruyte l’illustre avec des lettres légèrement inclinées, des cartes animées au scroll et des ombres adaptées à leur rotation. Pour garder une géométrie cohérente, une clé de cache peut synchroniser plusieurs propriétés, tandis que `sibling-index()` calcule la structure d’un éventail de cartes.

Ces effets conviennent surtout aux éléments décoratifs : l’article déconseille de randomiser les grilles, les textes courants ou les cibles interactives. Le déploiement navigateur étant en cours, il recommande une base stable avec `@supports`, ainsi que le respect de `prefers-reduced-motion` et des besoins des lecteurs d’écran.

- Sélectionné le : 2026-10-23

- Publication de la ressource : 2026-10-20

- Mise à jour de la fiche : 2026-11-07T20:32:37+0000

- Format : Article

- Langue de la source : EN

- Crédit : Brecht De Ruyte

- Repéré via : [Frontend Focus](<https://frontendfoc.us/>)

Ressource originale : [CSS \`random()\` : doser l’imperfection dans les interfaces](<https://www.smashingmagazine.com/2026/10/embracing-playful-imperfection-css-random-function/>)

Tags : [CSS](<https://sebastien.rigaux.be/veille/tags/css>) · [Animation](<https://sebastien.rigaux.be/veille/tags/animation>) · [Accessibility](<https://sebastien.rigaux.be/veille/tags/accessibility>) · [Progressive enhancement](<https://sebastien.rigaux.be/veille/tags/progressive-enhancement>)

Versions disponibles : [Français](<https://sebastien.rigaux.be/veille/liens/css-random-doser-limperfection-dans-les-interfaces>) · [English](<https://sebastien.rigaux.be/en/tech-watch/links/css-random-add-playful-variation-without-breaking-layout>)

[Retour à la veille](<https://sebastien.rigaux.be/veille>)
