Astuces en HTML-CSS avec input checkbox et :checked

Mathieu Chartier Programmation 0 commentaire

Les langages HTML et CSS ont bien évolué depuis des années et les intégrateurs, webdesigners et UX designers en ont profité à bien des égards pour trouver voire créer de nouvelles techniques de mise en page et de mise en forme. Nous allons voir que nous pouvons faire de bonnes choses juste avec un bon vieux <input type="checkbox" />, une pseudo-classe :checked et les sélecteurs adjacents.

Dans cet article, nous allons voir comment procéder pour créer un "montrer/cacher", une sorte d'accordion ou encore un menu responsive à l'aide d'un input de type "checkbox". L'idée est de montrer qu'il ne sert parfois à rien de foncer tête baissée dans du Javascript ou des techniques "lourdes" pour réaliser un menu en responsive, ou pour bloquer l'accès à des fonctionnalités, alors que du simple HTML-CSS peut suffire, sans problème de rétrocompatibilité avec l'ensemble des navigateurs.

Je fais partie des gens qui râlent souvent quand on voit des techniques hyper sophistiquées pour faire des choses simples, alors que des alternatives 100% compatibles existent déjà. Si j'apprécie les innovations, je trouve dommage que l'on mette dans la tête des webdesigners des méthodes qui ne sont pas encore très compatibles partout alors que d'autres le sont. Je n'ai donc pas de problème avec les évolutions en soi, mais plutôt avec le fait qu'on les mets dans le crâne des gens trop tôt, quitte à utiliser des polyfills (parfois néfastes pour la performance web) pour contrer les problèmes de compatibilité. Si des alternatives existent, alors autant les préconiser dans un premier temps, tout en montrant que de nouvelles méthodes seront bien plus efficaces prochainement...

Dans cet article, vous trouverez donc des exemples pour réaliser ces quelques techniques avec l'input checkbox :

  • Montrer/cacher sans Javascript
  • Menu responsive sans Javascript
  • Effet slide (ou swipe) sans Javascript
  • Blocage conditionné d'un bouton submit
  • Petit module (limité) d'accessibilité

Effet Accordion (montrer-cacher) en HTML-CSS sans Javascript avec input checkbox

Tous les codes peuvent être téléchargés via le bouton ci-dessous, ou directement en recopiant les exemples dans les différents CodePen qui seront affichés par la suite.

Télécharger “Astuces avec checkbox”checkbox.zip – Téléchargé 46 fois – 11 Ko

Quelques rappels de CSS, au cas où...

Pour rappel, les signes "+" et "~" utilisés en CSS permettent respectivement de cibler le voisin direct (qui suit) ou les blocs adjacents qui suivent le premier sélecteur. Par exemple, "li:first-child + li" vise le "li" voisin directement situé après le premier "li" d'une liste. En comparaison, "li:first-child ~ li" cible tous les "li" voisins directement situés après le premier "li". Il ne s'agit donc pas de blocs descendants mais bien de voisins (ou de blocs adjacents selon la terminologie que vous adoptez).

Si vous souhaitez viser des éléments qui ne sont pas des adjacents directs, mais descendants de ces blocs adjacents. Il est possible de coupler les sélecteurs ou d'utiliser le sélecteur universel "*" pour les viser. Par exemple, si on veut cibler tous les éléments descendants portant la classe "cachée" dans une <div> portant la classe "voisine" d'une autre div de classe "reference", on pourrait écrire "div.reference ~ .voisine .cachee" ou "div.reference ~ * .cachee". L'idée est alors d'associer le sélecteur originel aux blocs adjacents (ici l'étoile ou le ".voisine") en leur accolant un sélecteur descendant pour aller chercher au fond du bloc. L'avantage de l'usage de "*" est que le sélecteur sera capable d'aller chercher sur plusieurs niveaux de profondeur si nécessaire.

La pseudo-classe ":checked" fonctionne sur les éléments qui peuvent être cochés, à savoir les input de type "checked" notamment. Ainsi, il est possible en CSS de vérifier l'état de validation ou non d'un tel champ de formulaire. Il n'existe pas de pseudo-classe ":unchecked" mais il est possible de vérifier un état décoché en faisant ":not(:checked)" si nécessaire.

La propriété "pointer-events" en CSS permet de modifier le comportement d'un bloc par rapport à un événement ou une action de l'utilisateur (un clic de souris ou de stylet, ou encore de doigt). Ainsi, "pointer-events:none" bloque l'action d'un clic et peut empêcher à un lien ou à un bouton d'être cliquable. Il est possible de réactiver l'état originel en indiquant "pointer-events:initial" par exemple (d'autres valeurs sont possibles).

Maintenant que ces quelques rappels sont effectués, vous avez toutes les armes en main pour comprendre les codes qui suivent. ^^

Un montrer/cacher avec input checkbox et :checked

Pour débuter la série des exemples simples, voici un montrer/cacher (ou accordion) réalisé à partir d'un input checkbox et de la pseudo-classe ":checked". Le principe est extrêmement simple comme le montre les étapes suivantes :

  • HTML
    1. Créer un bloc dans lequel on ajoute un input checkbox avec un label. Il faut penser à ajouter l'attribut "for" dans le label pour le lier à l'input via son ID, cela permet de cocher la checkbox directement en cliquant sur le label.
    2. Créer un bloc adjacent à cet input, dans lequel doit être placé le contenu à montrer/cacher.
  • CSS
    1. Masquer l'input pour ne plus voir la case à cocher (le label suffira pour valider la coche).
    2. Masquer le bloc de contenu par défaut.
    3. Afficher le bloc de contenu quand la case est cochée (donc quand on clique sur le label)
    4. Styliser tout cela pour que rien ne laisse transparaître la technique utilisée... ;-)

Ce principe va servir de base pour presque tous les exemples, à quelques exceptions près. L'idée est toujours de jouer avec le label pour générer la coche d'un input masqué, et que les blocs adjacents réalisent une action spécifique.

Voici un CodePen qui reprend plusieurs exemple de montrer/cacher. Le dernier exemple couple un "tout afficher" et des "montrer/cacher" différenciés, mais dans ce cas, il reste quelques problématiques qui ne peuvent être résolues directement avec cette méthode (avec du Javascript ça serait plus simple ici).

See the Pen
Montrer-Cacher (accordion) avec input checkbox et :checked en HTML-CSS
by Mathieu Chartier (@MathieuChartierSEO)
on CodePen.

Menu responsive en pur HTML-CSS avec input checkbox et :checked

Dans le même esprit que l'exemple précédent, nous pouvons réaliser un menu responsive adaptatif à partir d'un input checkbox et de la pseudo-classe ":checked". L'idée ici est de fonctionner comme dans un site web classique, avec un seul menu, afin d'optimiser le code. Parfois, les menu responsive basés sur Javascript ou jQuery duplique ou clone le menu de départ, ce qui génère des noeuds dans le DOM qui pourraient donc être évités.

Le code s'inspire clairement du montrer/cacher, à la différence que notre bloc de contenu est en réalité un menu. Via CSS et avec les media queries, il ne nous reste plus qu'à appliquer l'effet du montrer/cacher en-dessous d'une certaine résolution d'écran. Le CodePen ci-dessous montre l'exemple en fonctionnement (n'hésitez pas à étirer/réduire la fenêtre pour voir le menu passer de son affichage normal au menu responsive).

See the Pen
Menu responsive en pur HTML-CSS avec input checkbox et :checked
by Mathieu Chartier (@MathieuChartierSEO)
on CodePen.

Effet Slide (Swipe) en HTML-CSS avec input checkbox et :checked

Continuons dans la liste des montrer/cacher différents, tel qu'un effet slide ou swipe en HTML-CSS. L'idée est de faire glisser un bloc pour le faire apparaître à l'écran par un simple clic sur un bouton (dans l'exemple un bouton "burger").

Effet Swipe ou Slide en pur HTML CSS sans Javascript avec input checkbox

Le principe est une nouvelle fois le même, si ce n'est que le CSS est là pour faire glisser le bloc au-dessus du <body>...

See the Pen
Swipe/Slide Menu en HTML-CSS (sans Javascript) avec checkbox et :checked
by Mathieu Chartier (@MathieuChartierSEO)
on CodePen.

Blocage d'un bouton et validation conditionnelle

L'exemple qui suit est bien différent des précédents puisque l'objectif est ici de bloquer de manière conditionnelle la soumission d'un formulaire en se basant là-encore sur un input "checkbox" et la pseudo-classe ":checked".

Le CodePen reprend le cas courant d'un formulaire qui nécessaire la validation de conditions (CGV ou CGU) pour pouvoir être soumis. Afin de s'assurer que tout est en ordre, il convient alors de bloquer le bouton "submit" tant que ne sont pas validées les conditions. Cela évite une fois encore d'abuser de Javascript juste pour des fonctions simples comme celle-ci. C'est dans cet exemple que la propriété "pointer-events" prend tout son sens...

See the Pen
Validation et bouton submit bloqué en CSS avec input checkbox, :checked et pointer-events
by Mathieu Chartier (@MathieuChartierSEO)
on CodePen.

Options d'accessibilité simples en HTML-CSS sans Javascript

Ce dernier exemple dérive des précédents et montre comment il serait possible de réaliser quelques tâches d'accessibilité en pur HTML-CSS. Certes, nous sommes loin des capacités d'un vrai module d'accessibilité dans lequel Javascript aura toute sa place, mais cela permet toutefois de réaliser quelques fonctions simples sans trop d'efforts. Il s'agit donc davantage d'un exemple que d'une astuce géniale et révolutionnaire... ^^

La contrainte principale rencontrée avec cette technique réside dans le fait que les options d'accessibilité doivent être adjacentes d'un bloc général pour pouvoir utiliser l'astuce de l'input "checkbox" et de la pseudo-classe ":checked". Par conséquent, il n'est pas possible de créer un bloc contenant ces options, comme on le ferait fort logiquement, ce qui n'est pas des plus pratiques. C'est pourquoi le début de l'HTML dans le CodePen montre les diverses options, accolées à un bloc global pour la page à afficher (qui prend le rôle du <body> en quelque sorte).

See the Pen
Options d'accessibilité en pur HTML-CSS avec input checkbox et :checked
by Mathieu Chartier (@MathieuChartierSEO)
on CodePen.

Conclusion

Tous ces exemples démontrent qu'il suffit parfois de créer de bonnes associations d'éléments HTML et de sélecteurs CSS pour réaliser des tâches régulièrement effectuées avec Javascript. Si l'on souhaite respecter certains principes d'éco-conception, il convient toujours de se demander s'il est possible de contourner certaines méthodes pour s'abstenir de codes souvent plus lourds ou contraignants. Bien entendu, la méthode de l'input "checkbox" et de la pseudo-classe ":checked" n'a rien de révolutionnaire et ne pourra pas résoudre tous les maux (on le voit d'ailleurs dans certains cas présentés précédemment), mais elle permet notamment d'effectuer simplement des effets de slide, des menus en responsive ou encore des montrer/cacher, totalement rétro-compatibles et légers...