L’article présente deux nouvelles fonctions CSS, sibling-index() et sibling-count(), issues du module CSS Values and Units Level 5, permettant de simplifier la création d’effets de cascade décalée (staggered animations) sans recourir à des boucles Sass ou à du JavaScript. Ces fonctions exploitent des données déjà connues du navigateur, comme la position d’un élément parmi ses frères ou le nombre total de ses frères, pour appliquer des animations dynamiques en une seule ligne de CSS, sans limite de taille de liste.
L’auteur explique que les méthodes traditionnelles (comme les sélecteurs :nth-child() ou les manipulations JavaScript) sont lourdes et peu maintenables, surtout pour des listes dynamiques. À l’inverse, sibling-index() et sibling-count() offrent une solution élégante et performante, fonctionnant aussi bien pour 5 éléments que pour 5 000, sans générer de code superflu ni dépendre de variables injectées dynamiquement.
Ces fonctions, déjà approuvées par le CSS Working Group, résolvent un problème récurrent en CSS en donnant accès à des informations structurelles du DOM directement dans les styles, ouvrant la voie à des mises en page plus dynamiques et maintenables.
