Catégories
Astuces et Design

Une machine à états complète faite avec des cases à cocher HTML et CSS

Les machines d'état sont généralement exprimées sur le Web en JavaScript et souvent via la bibliothèque XState populaire. Mais le concept de machine à états est adaptable à à peu près n'importe quel langage, y compris, étonnamment, HTML et CSS. Dans cet article, nous allons faire exactement cela. J'ai récemment construit un site Web qui incluait une contrainte «JavaScript sans client» et j'avais besoin d'une fonctionnalité interactive unique.

La clé de tout cela est d'utiliser

et éléments pour tenir un état. Cet état est basculé ou réinitialisé avec une autre radio ou réinitialiser
Controlled from anywhere

Cela montre une implémentation minimale. Le bouton radio masqué et le div il contrôle doit être des frères, mais cette entrée est masquée et n'a jamais besoin d'interagir directement avec l'utilisateur. Il est défini par défaut checked valeur, effacée par l'autre bouton radio et réinitialisée par le bouton de réinitialisation du formulaire.

input(name='rrc-group'):checked + .controlled-rrc {
  display: none;
}
.hidden {
  display: none;
}

Seules deux lignes de CSS sont nécessaires pour que cela fonctionne. le :checked Le pseudo-sélecteur connecte l'entrée masquée au frère qu'il contrôle. Il ajoute l'entrée radio et le bouton de réinitialisation qui peuvent être stylisés comme une seule bascule, ce qui est illustré dans le stylet suivant:

Accessibilité… devez-vous faire cela?

Ce modèle fonctionne, mais je ne suggère pas qu'il devrait être utilisé partout pour tout. Dans la plupart des cas, JavaScript est le bon moyen d'ajouter de l'interactivité au Web. Je me rends compte que la publication de ce message pourrait attirer l'attention des experts en accessibilité et en balisage sémantique. Je ne suis pas un expert en accessibilité et la mise en œuvre de ce modèle peut créer des problèmes. Ou peut-être pas. Un bouton correctement étiqueté qui fait quelque chose sur la page contrôlée par des entrées autrement masquées peut fonctionner correctement. Comme toute autre chose dans le domaine de l'accessibilité: des tests sont nécessaires.

De plus, je n'ai vu personne d'autre écrire sur la façon de procéder et je pense que les connaissances sont utiles, même si elles ne sont appropriées que dans des situations rares ou extrêmes.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *