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

Deuxième article de nos techniques pour intégrateursde mars centrés sur les créations sans Javascript. Au programme, comment tirer partie des inputs.

La doctrine NoJS : Créer sans Javascript

Cet article le second 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.

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'attrubuts), car c'est le mécanisme principale que nous avons en CSS pour créer de la logique. L'article de la semaine dernière étant fait de deux exemples de ce principe, je recommande vraiment de le lire si ce n'est pas encore fait.

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 notre unique exemple de la semaine.

Pure CSS Light Bulb par DEGRYSE Alexis (@twogrey)

On commence directement avec la petite ampoule qui me sert de couverture pour cette serie d'articles.

See the Pen Pure CSS Light Bulb by DEGRYSE Alexis (@twogrey) on CodePen.

Comme vous pouvez le voir, nous pouvons faire varier la lumière faite par l'ampoule avec la jauge, le tout sans Javascript !

Niveau HTML, on commence très fort avec de l'algorithmique directement, le tout dans une template Pug.

See the Pen Pure CSS Light Bulb by DEGRYSE Alexis (@twogrey) on CodePen.

C'est du HTML ?? Si c'est la première fois que vous voyez un code de ce style, sachez que l'imbrication se fait avec l'indentation, et que nous n'avons donc pas besoin des balises fermantes. De plus, nous pouvons utiliser la notation "CSS" pour définir les classes et ID, et que nous pouvons ignorer "div". Pour avoir un aperçu du HTML si vous en avez besoin, appuyez sur la fleche a gauche de la boîte HTML, et demandez "view compiled HTML".

Comme vous pouvez le voir, nous sommes face a une liste d'elements label suivi d'elements inputs, dont le cinquantième est "checked". En dessous, nous retrouvons notre ampoule.

Maintenant que nous avons expédie le HTML, passons au CSS, la partie intéressante de cet article.

See the Pen Pure CSS Light Bulb by DEGRYSE Alexis (@twogrey) on CodePen.

Nous commençons avec une liste de déclaration de variables. Les premières sont les couleurs utilisées, puis la largeur, hauteur de chaque rang ainsi que leur nombre, et enfin la taille de l'ampoule.

Je saute la suite jusqu'au bloc ligne 48, ou le style du label est défini. Ligne 64, nous avons une boucle permettant de définir la taille de chacun des labels qui compose la "jauge". Notez que la boucle ne prend en compte que le strict minimum de ligne, la taille, pour ne pas encombrer le CSS final.

Enfin, nous pouvons aller ligne 71 ou l'ampoule est créée, puis ligne 120, ou la magie opère et ou nous allons commencer a detailler.

Ligne 122, nous avons "&:checked ~ label" qui prends un opacity: 0.5 . Cette ligne fait que tous les labels APRES l'input radio checke sont translucides, pour représenter le fait qu'ils sont "inactifs". Si vous avez pris le temps de regarder les étoiles que j'avais propose en fin d'article la semaine dernière, vous pouvez noter que c'est exactement la même technique qui est utilisée ici.

Enfin, nous avons une boucle ligne 125, qui va générer une centaine de ce genre de bloc, en changeant juste les valeurs chiffrées :

&.rank-1:checked ~ .light-bulb .base .bulb {
       box-shadow: 0 0 2px * 1 lighten($yellow,0.5 * 1);
       background-color: lighten($yellow,0.5 * 1);
}

Comme vous pouvez le voir, c'est exactement la même manière de cibler l'element de manière détournée que l'exemple deux de la semaine dernière, la checkbox était juste ici remplacée par une liste de radios.

Et c'est tout ?

Cette semaine n'a qu'un seul exemple, mais vous laisse avec un exercice particulièrement intéressant : un morpion en CSS. Sachez qu'il ne fait rien que vous n'avez pas encore vu sur ces deux semaines, ce n'est qu'un autre pen un petit peu plus complexe de la technique utilisée dans notre exemple d'aujourd'hui.

See the Pen Pure CSS Tic-tac-toe by Žiga Miklič (@ziga-miklic) on CodePen.

À la semaine prochaine pour notre avant-dernier article sur ce sujet !