Créer des animations sans code Javascript

La doctrine NoJS : Créer sans Javascript

Comme pour les deux séries précédentes, la compréhension de cette série d'articles vous demandera quelques connaissances préliminaires.

Pour commencer, il sera indispensable de bien comprendre comment cibler les éléments en fonction de leurs voisins (les selecteurs combinateurs) ainsi qu'en fonction de leurs etats (les pseudo-classes et les selecteurs d'attributs), car c'est le mécanisme principale que nous avons en CSS pour créer de la logique. Si vous ne vous sentez pas à l'aise avec ce sujet, je vous conseille la lecture de la page MDN sur les Sélecteurs CSS, ainsi que de faire un tour sur CSS diner, un petit jeu qui couvre le sujet de manière exhaustive.

Enfin, car c'est un sujet qui amène un CSS extrêmement verbeux et répétitif, la plupart des exemples (et moi aussi donc) utiliserons des préprocesseurs et un petit peu d'algorythmie. Si vous n'êtes pas à l'aise avec sass, je vous conseille donc la page de documentation de ce dernier.

Pour l'algorithmie, le problème est un peu plus compliqué, et je n'ai trouvé aucune ressource éducative gratuite vraiment simple et concise. Si vous avez quelque chose comme ça à la proposer, faite je en commentaire !

Maintenant qu'on a fait le tour des pré-requis, il est temps de commencer avec nos exemple !

Exemple 1 : Open/Close Panel (nojs) par Christophe Molina B

On commence tout de suite avec notre premier exemple, qui n'est peut etre pas tres impressionnant en apparence, mais particulierement interessant : un simple petit menu sur le cote, qui s'ouvre au click, et evidemment, le tout sans Javascript !

See the Pen Open/Close Panel (nojs) by Christophe Molina B. (@10tribu) on CodePen.

Commencons avec le HTML en extrayant ce qui va nous interesser dans ce pen.

See the Pen Open/Close Panel (nojs) by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

Comme vous pouvez le voir, nous sommes sur quelque chose de vraiment très simples : une boîte, deux liens. Pourquoi deux liens ? Tout simplement car l'un sera affiche quand l'autre sera caché, et inversement, ce qui nous permettra de mettre en place deux actions, une pour ouvrir, l'autre pour fermer.

Enfin, notez que les deux liens pointent sur des ancres, et que l'ancre du bouton "open" est la même que l'ID du volet. Si vous connaissez bien vos selecteurs CSS, vous savez ou je veux en venir : la pseudo-class target !

À retenir : :target est une pseudo-classe qui s'active quand le fragment identifiant de l'URL (tout ce qui suit # dans l'URL) est le même que l'id de l'element.

See the Pen Open/Close Panel (nojs) by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

Je vous laisse lire les 55 premières lignes du Css seuls, qui ne devrait pas vous poser de problèmes (je les ai commenté dans le doute mais il n'y avait vraiment pas besoin), et attaquons-nous aux lignes suivantes.

Comme nous pouvions nous y attendre, nous retrouvons effectivement #volet:target. Grâce à ce pseudo-element, la quinzaine de lignes de la fin du CSS ne s'expriment que quand le fragment identifiant est égal à #volet, c'est-à-dire quand nous avons cliqué sur le bouton "open".

L'effet de ces quelques lignes est évidemment de cacher le bouton open, afficher le bouton close et faire sortir le volet de sa cachette. Enfin, un clic sur le bouton "close" changera le fragment identifiant en "#close", nos lignes arrêteront donc de s'exprimer et notre volet reprendra sa position initiale.

Exemple 2 : Pure CSS Slide Down Toggle par Surjith

Notre deuxième exemple est assez proche du premier en apparence, mais il utilise une tout autre technique, un peu plus complexe, mais bien plus puissance et souple pour la suite.

See the Pen Pure CSS Slide Down Toggle by Surjith (@surjithctly) on CodePen.

Cette fois-ci, je ne vais pas vous nettoyer le HTML et le CSS, si vous avez compris l'exemple precedent vous ne devriez pas avoir de soucis

D'un point de vue HTML, il y a deux éléments intéressants à remarquer. Pour commencer, l'input[type="checkbox"] tout en haut de la page, et ensuite le fait que le bouton ne soit pas un lien mais un label (sans aucun contenu) qui le contrôle.

Au click sur le label, l'element #toggle passera de l'état null à l'état :checked, ou inversement, nous pouvons donc nous douter que ce soit ce que va utiliser ce pen pour ouvrir ou fermer le volet. Regardons le CSS pour confirmer nos doutes.

Comme pour l'exemple précédent, je passe très rapidement sur les 74 premières lignes de CSS, a l'exception d'un seul point : la ligne 67. Comme vous pouvez le voir, le texte du label (qui était vide, je le rappelle) et insère depuis un pseudo-element. L'avantage de cette technique est qu'elle permet de customiser l'affichage de son label directement depuis le CSS, sans avoir à créer deux éléments.

Attention : si customiser le texte de ses boutons peut sembler intéressant de prime abord, dites-vous bien qu'il sera bien plus complexe de traduire ces bouts de texte si vous avez besoin de multilangue

A partir de la ligne 75,  les choses deviennent enfin interessantes grace au selector #toggle:checked ~ .message.

L'élément ~ est un sélecteur de voisin global, et dans notre exemple il va sélectionner tous les éléments .message qui suivent #toggle:checked tant que l'on reste dans le même parent. Il est à bien différencier du +, qui est un sélecteur de voisin stricte, qui ne va sélectionner .message que s'il est le voisin direct de notre élément #toggle:checked

Grâce à ces sélecteurs et le couple label/checkbox, il est donc possible de conditionner du Css à si la checkbox est cochée ou non, et donc d'afficher/masquer notre volet.

Le mot de la fin

C'est tout pour aujourd'hui ! Si le sujet vous intéresse et que vous cherchez un autre exemple de ce niveau-là à décortiquer, je vous conseille de décortiquer le pen suivant : Pure CSS Star Rating Widget par James Barnett.

See the Pen Pure CSS Star Rating Widget by James Barnett (@jamesbarnett) on CodePen.

La semaine nous monterons en puissance avec des codes bien plus longs, qui nous demanderons malheureusement un assez gros usage des préprocesseurs.

Les exemples seront un peu plus impressionnants, mais comme vous pourrez le voir l'idée restera globalement la même, il est donc important de bien avoir compris le deuxième exemple d'aujourd'hui. À la semaine prochaine, et n'hésitez pas à laisser un petit commentaire ou poser des questions si vous en avez !