CSS `random()` : doser l’imperfection 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.