Comprendre et appliquer la récursivité en CSS

La récursivité, qu'est-ce c'est ?

La récursivité est une démarche qui fait référence à l'objet même de la démarche à un moment du processus. C'est l'effet que vous avez en filmant un écran avec la caméra qui diffuse sur ce même écran, ou si vous mettez deux miroirs l'un en face de l'autre.

En développement, nous appelons récursive une fonction qui s'appelle elle-même et c'est un des meilleurs moyens de se passer des boucles.

Comprendre la récursivité en CSS

Malheureusement, la récursion n'est pas quelque chose que l'on ne pourra réellement appliquer en l'état en CSS, mais il est assez simple de reproduire un effet à mi-chemin entre la récursion informatique et la récursivité. Comment ? En insérant des objets identiques les uns dans les autres.

Prenons comme exemple le Codepen suivant. Comme vous pouvez le voir, nous avons 4 objets .item, insérés les uns dans les autres, de plus en plus petit. Cet effet a été obtenu de manière très simple : par récursion.

Comme vous pouvez le voir, les seules tailles absolues sont dans les lignes 14 et 15 du CSS, et ne s'applique qu'au premier objet (à cause du ">", qui ne prennent en compte que les enfants directs d'un objet). Tous les autres objets ont une taille définie relativement : 50% de celle de leur parent. Notre premier fait donc 200 pixels, le suivant 100 pixels, puis 50 px et 25 px. Et ce, sans que nous ayons à les définir à la main. De la récursion !

Si la taille est une propriété "évidente" pour la récursion, il en existe de nombreuses autres ! Prenons comme exemple la propriété transform "rotate". Cliquez sur notre petite collection de carrés et observez les entrer en rotation !

Ajoutons un peu d'animation dans l'équation

Note : Vous ne connaissez pas la propriété filter ? Cette propriété très intéressante vous permet de reproduire certains des effets que vous pouvez appliquer à vos images sur Photoshop directement depuis le CSS. Pour en savoir plus, nous vous proposons de lire la page du MDN dédiée à filter.

Comme vous pouvez le voir, le code n'est pas bien plus compliqué que le précédent, nous sommes encore ici face à des carrés dans des carrés. La taille et la rotation par récursion n'ont plus de secret pour vous et le filter fonctionne exactement de la même manière. La seule grande nouveauté ici est l'animation.

Ajouter une animation n'a pas vraiment complexifié la chose. La seule difficulté est de bien garder en tête que chaque changement fait sera appliqué de plus en plus fort à mesure que l'on avance dans la hiérarchie du HTML.

La magie de la propriété inherit

Pour finir, nous voulons attirer votre regard sur une valeur particulièrement intéressante du CSS : inherit.

Cette valeur commande à une propriété de prendre la valeur de cette même propriété sur son parent, ce qui nous arrange bien pour travailler avec la récursion ! Comme exemple, nous vous proposons de prendre le codepen suivant.

Nous retrouvons les habitudes des Codepens précédents pour la plupart des points, avec la présence aux lignes 37 et 38 de "inherit", qui fait que les valeurs transform et opacity sont prises depuis l'élément parent.

Ce qui est beau avec cette petite modification est que s'il est possible de modifier dynamiquement la valeur d'un élément, cette modification s'appliquera à tous ses parents ! Nous vous invitons à essayer les petits curseurs pour vous en convaincre. Notez aussi que les curseurs s'appliquent à l'objet en surbrillance et qu'il est possible d'en sélectionner un autre au clic.

Conclusion

Bien que la récursion soit quelque chose d'encore très expérimental, c'est une technique qui peut vous sauver beaucoup de lignes lors de la création de vos illustrations CSS et animations. Nous vous encourageons donc à prendre un peu de temps pour expérimenter sur ce concept et à tirer parti de sa puissance pour essayer de créer des animations les plus naturelles et intéressantes possibles !