Inspirations et techniques pour intégrateurs : Créer de l’interactivité sans Javascript

Cet article le dernier d'une série initiée avec l'article Inspirations et techniques pour intégrateurs : Créer de l'interactivité sans Javascript #1. Si vous ne l'avez pas lu, allez donc y faire un petit tour avant la fin de continuer cet article.

Ensuite, sachez que l'exemple décortiqué dans cet article est vraiment complexe et vous demandera une bonne connaissance du CSS ainsi que de certains des hacks qu'il est possible de faire avec ce dernier. Si vous être un débutant de l'intégration, cet article n'est peut-être pas pour vous, et je n'ai malheureusement pas de ressource à vous proposer pour pallier cela.

Enfin, sachez aussi que je ne vais pas retirer les préprocesseurs des exemples, et que très peu simplifier leurs usages, simplement documenter les choses qui sortent de l'ordinaire. Si vous n'êtes pas à jour sur ce sujet, je vous ai préparé deux petits articles pour vous simplifier le démarrage.

Petit guide d'utilisation des pré-processeurs CSS #1 Les bases

Petit guide d'utilisation des pré-processeurs CSS #2 Un peu d'algorithmique

Maintenant que tout est dit, attaquons nous à décortiquer le dernier article de ce dossier.

L'auteur du pen d'aujourd'hui est Gregor Adams, que je ne connaissais pas avant cette analyse mais que je reconnais maintenant comme un vrai monstre du CSS. Edgar's lair est ni plus ni moins qu'un petit prototype de RPG comprenant un déplacement sur une map, des animations, des interactions avec divers éléments et un changement de map. Le tout bien entendu sans la moindre ligne de Javascript.

See the Pen Edgars Lair | a pure CSS RPG by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

Face à la complexité de la tache, nous allons découper cette analyse en plusieurs morceaux thématiques.

Note : le pen original avait du son, que j'ai retiré. Attention tout de même en visitant la page de la source originelle.

Commençons par le début et ce premier écran, que je vous ai extrait de la masse de code.

See the Pen Edgars Lair explained. Part 1 : welcome screen by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

La partie la plus intéressante à analyser pour bien comprendre le fonctionnement de ce genre de pen est évidemment la partie interactive : le bouton. Comme vous pouvez le voir, il s'agit d'un label, permettant de contrôler une checkbox placée au-dessus de la div .explain .

Les plus studieux d'entre vous l'auront remarqué, il s'agit de la même technique que celle étudiée sur les exemples des articles numéro 2 et 3, je vous laisse donc retourner lire l'article inspirations et techniques pour intégrateurs : Créer de l'interactivité sans Javascript #2 si cela vous semble encore un petit peu flou.

Un click sur le bouton coche la checkbox, et permet donc à ce premier écran de disparaitre grace au block que vous retrouverez à la ligne 106.

.explain {  
  #ch_play:checked ~ & {
    display: none;
  }
}

Les différentes interactions avec les éléments que vous pourrez trouver à travers les pièces peuvent très bien se faire avec la même technique que précédemment, des checkbox.

Ce qui va nous interesser ici est un cas particulier, .girl, ou l'auteur l'auteur a préféré choisir une solution moins couteuse en nombre de lignes : le pseudo-selecteur focus.

[Description et lien vers plus d'explications sur focus]

La pseudo-classe :focus permet de cibler un élément lorsque celui-ci reçoit le focus (soit il est sélectionné à l'aide du clavier, soit il est activé avec la souris comme par exemple le champ d'un formulaire). Pour une description complète et des exemples, je vous conseille la page correspondante du MDN.

Pour ce qui est des textes, vous pouvez remarquer que les bulles sont faites grâce aux pseudo-éléments before et after. Notez au passage qu'il est possible de passer le contenu d'un attribut HTML de votre élément a ces pseudo-elements grace à attr().

Note: saviez-vous que les attributs sont censés pouvoir être utilisé dans bien d'autres cas ? La spécification prévoit de pouvoir les utiliser comme n'importe quelle donnée chiffrée ou couleur par exemple !

Malheureusement les grands navigateurs n'ont pas suivi, ce qui fait que cette spécification n'est actuellement implémentée nulle part. Je vous laisse la page attr() du MDN où vous pourrez retrouver une documentation en français, un descriptif du support navigateur (indice : personne ne le supporte) et la spécification complète.

Pour ce qui est des pièces, nous retrouvons notre technique des labels, contrôlant ici des radios que vous pourrez retrouver dans le HTML ligne 23 à 26. L'avantage des radios est évidemment de s'assurer que vous ne pourrez pas avoir deux pièces sélectionnées en même temps.

Je ne m'étends pas plus sur cette technique que nous avons déjà beaucoup traite au cours de ce dossier.

Première partie des déplacements du personnage jouable avec les animations de marche !

La technique utilisée ici est un décalque de celle utilisée avec les labels, mais avec le psedo-selecteur :active, permettant d'ajouter une animation au personnage tant que nous appuyons sur un bouton (vous pourrez trouver un exemple ligne 560 pour les déplacements vers le haut).

L'animation en question est un simple déplacement de background-position, permettant de sélectionner et faire varier l'image sur un sprite composé de toutes les positions du personnage. Vous pourrez retrouver le code entre la ligne 566 et 597 du CSS.

Ce point est vraiment un point sensible, et il aura été le plus dur à comprendre de tout cet article. Son explication est aussi vraiment longue et nécessite de nombreux exemples pour être compréhensible, j'ai donc décidé d'en faire un article complet que vous retrouverez jeudi prochain.

En quelques mots, sachez juste que le secret réside dans une transition entre deux positions du fond, et que le "retour" en position originale est empêché par une transition avec un délai tellement long qu'il peut être considéré comme infini. 

Je vous donne rendez-vous la semaine prochaine pour plus d'explications, un découpage du pen et des exemples pratiques.

Seule ombre au tableau de ce pen pour moi : les déplacements au clavier qui ne fonctionne pas (du moins sur Chrome).

L'idée de l'auteur était d'utiliser les accesskey, qui permettent de donner le focus à un bouton ou un champ, pour permettre un déplacement avec les touches ALT + WASD (le ZQSD des claviers qwerty).

Sur le pen cela ne fonctionne pas, car il aurait fallu pour cela ajouter le pseudo-selecteur "focus". Seul problème, il est dur pour un élément de perdre le focus, et le personnage se déplacera donc dans la dernière touche appuyée à l'infini.

J'ai modifié le code pour le déplacement vers le haut, je vous laisse l'essayer pour mieux comprendre.

Je pense que vous en conviendrez tous, ce pen est une vraie folie, sans aucun doute le plus complexe que j'ai vu à comprendre jusqu'à présent. Si vous appréciez ce genre de travail, sachez qu'il existe de nombreux autres pens totalement fous qui trainent dans les créations de Gregor Adams, et qu'il prévoit même une version 2 des Edgars lair, avec un support de marchands, potions, et d'autres choses totalement folles.

Pour finir, j'espère que le sujet de la création d'interactions sans JS vous aura intéressé et vous aura donné envie de vous y essayer. N'hésites pas à donner votre avis ou poser des questions en commentaires, je suis toujours très intéressé par vos retours.

Exceptionnellement, il n'y aura pas de dossier sur avril, je prends des vacances ! Je vous donne donc rendez-vous en Mai pour le prochain dossier.