DIY 4 – Comment faire

CSS… voilà un langage qui fait peur à beaucoup de développeurs que je connais! La raison est simple. Ce n’est pas un langage impératif, ou comme on voit souvent à la blague sur les réseaux sociaux, un vrai langage de programmation.

Par contre, une fois qu’on le maîtrise bien, ça devient un outil assez puissant au niveau marketing dans une application. C’est effectivement CSS qui fait la différence en « Meh » et « Wow », peu importe que le code soit propre ou non. À titre comparatif, le CSS est l’équivalent d’une devanture de maison. Si elle est défraîchie, on pensera que l’intérieur est pareil…

Je crois donc que tout bon programmeur devrait se mettre à fond dans CSS. La stack n’arrête pas à JavaScript 😛

Partagez-moi 😀

Objectif

Aujourd’hui, l’objectif du DIY est de se familiariser avec des sélecteurs plus poussés de CSS ainsi que des propriétés pour animer que j’ai déjà couvertes ici et ici par le passé. Nous allons appliquer quelques règles d’expérience utilisateur pour les boutons radios.

Plan

1. Quelques règles d’expérience utilisateur
2. Préparer le HTML
3. Styler les boutons radio

Prérequis

• Une base en CSS

Étape 1 – Quelques règles d’expérience utilisateur

Principalement, la raison pour laquelle les sites web ne passe pas au mobile directement est liée au fait qu’il est difficile, voire même impossible, d’adapter une vue conçue pour un PC à un petit écran. C’est pour cette raison qu’il faut débuter le développement en mode mobile, puis on agrandi jusqu’au PC.

Avec la mentalité mobile-first, il va de soit que certains composants, comme les boutons radios, nécessitent d’être repensés. On cherche à les rendre cliquables facilement sans avoir de risque d’accrocher une réponse. Pour cette raison, on utilise régulièrement des boutons-bascules.

Pour résumer, je dirais :

• Préférer un layout vertical. On doit remplir un formulaire de haut en bas, il faut éviter d’amener l’utilisateur à briser ce mouvement vertical naturel.
• Il faut toujours proposer une réponse par défaut. Une règle de base de l’expérience utilisateur est qu’un utilisateur doit toujours pouvoir annuler son choix. Quitte à mettre une option « aucun » ou « je ne veux pas répondre » à la liste si c’est une valeur que vous autorisez.
• Donner un bon feedback visuel. La réponse doit être clairement identifiée.

Étape 2 – Préparer le HTML

Bien entendu, pour que le bouton radio soit beau, il faut bien penser à la structure du HTML et le designer en conséquence. Traditionnellement, un bouton radio est constitué d’un libellé et d’un bouton (radio!). Il faut donc traiter ces deux entités ( input et label) comme étant un seul composant.

Puis, parce que c’est un choix multiple, il faut pouvoir traiter plusieurs de ces boutons. On ajoutera donc un conteneur pour les empiler.

De cette façon, on arrive à styler chaque boutons, mais aussi la liste en entier.

Étape 3 – Styler les boutons radio

Pour le conteneur des radios, la liste, ce sera super simple. Pour les empiler, nous allons utiliser flexbox avec la direction en colonne :

Puis, pour le bouton en tant que tel, nous allons utiliser la direction horizontale (valeur par défaut). Ce qu’il faut comprendre, c’est que la propriété flex-grow nous permettra de dire au label de prendre tout l’espace disponible, ce qui lui donnera un look de bouton de la même largeur.

Maintenant, on est rendu au bouton! Évidemment, on veut le cacher pour que le label soit un bouton, mais on veut quand même savoir quelle valeur est sélectionnée. Si vous utilisez display: none, il sera impossible pour l’utilisateur de sélectionner une valeur avec tab et les flèches du clavier. Il faut préférer lui donner une taille à 0.

À noter que les crochets sont un sélecteur CSS de propriété. Lire : « Tous les éléments de type input qui ont une propriété type définie à radio et une classe cute ».

Ensuite, on passe au label . Pour s’assurer que le style ne s’applique pas à tous les label, il faut être restrictif avec le sélecteur de frère adjacent (ish, adjacent sibling!).

Le + se lit : « Tous les label qui sont immédiatement après un input qui a une propriété… ». Il peut être intéressant de mentionner que flex-grow dit au label de prendre toute l’espace disponible parce qu’il est le seul enfant du conteneur flex .input-container décrit plus haut. On utilise aussi la propriété transition pour effectuer une transition graduelle dans les styles, notamment au survol de la souris pour la couleur de fond.

Maintenant, on va ajouter de la couleur au label du bouton radio sélectionné. Pour se faire, il faut utiliser le pseudo sélecteur :checked .

Pour changer la couleur au survol de la souris, vous connaissez probablement le pseudo sélecteur :hover. On peut utiliser aussi le pseudo sélecteur :not() pour, par exemple, ne pas changer la couleur au survol de la souris si le bouton est déjà sélectionné.

Lire : « Tous les label que la souris survole et qui sont immédiatement après un input qui a une propriété type définie à radio, mais qui n’est pas sélectionné. » 🤯

De la même façon, on pourrait espacer les boutons verticalement. Je vous laisse ceci comme dernier petit truc. Puisqu’on traite la liste de boutons comme un composant, on veut éviter d’avoir de l’espace vide après le dernier boutons. Encore les pseudo sélecteur à la rescousse!

Conclusion

Voilà que CSS n’a plus de secret pour vous! Vous avez appris aujourd’hui à intégrer des règles de UX simple à des composants communs tels qu’un bouton radio. J’aimera vous lancer un défi. Faites vous une case à cocher! Le challenge est un petit peu plus difficile parce qu’on veut créer ladite case (carré avec crochet). Amusez-vous et expérimentez.

Cheers!