L’article explique comment gérer l’état visuel d’une interface directement en CSS plutôt qu’en JavaScript, notamment pour des interactions simples comme des panneaux, des icônes ou des thèmes. Il présente le checkbox hack, une technique où une case à cocher masquée sert de machine à états, déclenchant des changements de style via le pseudo-sélecteur :checked et les combinateurs de frères. Avec l’arrivée de :has(), cette méthode devient plus flexible, permettant de placer la case n’importe où dans le DOM tout en contrôlant des éléments précédents.
L’auteur illustre cette approche avec un exemple de bascule entre thèmes clair et sombre, utilisant color-scheme et la fonction light-dark() pour adapter dynamiquement les couleurs. Bien que pratique, cette technique repose sur des sélecteurs comme #id, dont l’impact sur les performances est à considérer. L’article souligne aussi l’importance d’utiliser hidden plutôt que disabled pour masquer la case, tout en notant ses limites en termes d’accessibilité.
Tout est dans le titre
Comment créer un "toggle switch" accessible
Si une case à cocher s'affiche en état "indéterminé", et si le formulaire est validé, alors il n'y a pas de valeur transmise. L'état "indéterminé" est strictement esthétique et est équivalent à "false"
Une bibliothèque CSS pour avoir de belles cases à cocher / boutons radio
Tout est dans le titre (via https://blog.stephaniewalter.fr/semaine-pixels-24-fevrier-2017/ )
Tout est dans le titre (via https://www.creativejuiz.fr/blog/ressources-telechargements/les-ressources-du-web-26 )
Tout est dans le titre
Tout est dans le titre
Des astuces pour les cases à cocher (checkbox), on peut faire pas mal de choses !
Afficher des champs de formulaire supplémentaire en fonction de l'état de boutons radio / checkbox
Une liste hiérarchisée de cases à cocher en utilisant le composant Form de Symfony2, ainsi que Twitter Bootstrap et un peu de JavaScript
Intéressant, je ne suis pas encore tombé sur ce cas de figure mais ça peut servir