De plus en plus récemment, j'ai vu des développeurs utiliser des astuces pour créer des états de basculement en utilisant du CSS pur. Cela vous permet de sauter le JavaScript sans sacrifier l’interaction. Comment cela marche-t-il? Est-ce une pratique acceptable?
Aujourd'hui, nous allons examiner deux méthodes distinctes pour utiliser une case à cocher afin de créer un événement de clic qui permute entre deux images en utilisant le bon vieux HTML et CSS. Nous terminerons par une brève discussion sur la sémantique et les avantages / inconvénients de cette technique.
Comme écorcher un chat
"Vous créez essentiellement une case à cocher en HTML uniquement pour la masquer et voler ses fonctionnalités."Avec n'importe quelle astuce CSS, il y a toujours une poignée de façons d'accomplir la tâche que vous souhaitez accomplir. Nous allons apprendre ici comment utiliser les cases à cocher pour créer deux états pouvant être basculés entre HTML et CSS. Compte tenu de cet objectif, nous pouvons facilement trouver au moins deux façons de le réaliser. Même dans le cadre de ces deux stratégies principales, vous constaterez qu'il existe plusieurs routes que nous pourrions emprunter.
Les deux méthodes impliquent des ruses douteuses en CSS. Vous créez essentiellement une case à cocher en HTML uniquement pour la masquer et voler ses fonctionnalités. La première méthode étend simplement la case à cocher à la taille de la zone que vous souhaitez rendre cliquable sans utiliser d'étiquette.
La deuxième méthode utilise la fonctionnalité intéressante des étiquettes associées à une case à cocher. Même si vous masquez la case à cocher elle-même, l’étiquette peut en fait être stylée, positionnée et cliquée pour activer la bascule, ce qui nous donne un élément totalement flexible pour travailler avec deux états possibles.
Regardons de plus près chacune de ces méthodes.
Méthode 1
La première façon dont nous allons attaquer cette expérience consiste à faire en sorte que notre case à cocher engloutisse la taille de notre objet, puis à le cacher. Pour que cela fonctionne, tout ce dont vous avez besoin sur le plan technique est une div contenant une case à cocher avec une classe appliquée. Si vous voulez aller plus loin, vous pouvez ajouter d'autres attributs tels que "name". Nous ajouterons également une image pour que nous puissions basculer.
Il est maintenant temps d'accomplir l'acte douteux de transformer toute notre image en une grande case à cocher. Pour ce faire, ciblez le? Basculer? classe que nous avons précédemment mise en place et que nous utilisons la même hauteur et la même largeur que celles que nous utilisons depuis le début.
Ensuite, définissez la position sur absolue et réinitialisez la gauche, le haut, la marge et le remplissage, juste pour être sûr que le point de départ sera là où nous le voulons. Cela fonctionnera en tandem avec notre positionnement relatif précédent, de sorte que notre case à cocher puisse désormais occuper tout l'espace de l'image. Pour vous assurer que la case à cocher reste au-dessus de tout, définissez sa valeur d'index z sur une valeur arbitrairement élevée.
Enfin, définissez l'opacité de la case à cocher sur 0 pour la masquer complètement. La chose intéressante ici est que cacher la case à cocher ne désactive pas sa fonctionnalité. Alors maintenant, lorsque vous cliquez n'importe où sur l'image, vous activez ou désactivez la case à cocher.
Notre case à cocher cachée fonctionne, mais nous ne l'avons pas encore configurée. Comme je l'ai déjà mentionné, nous souhaitons basculer l'opacité de l'image HTML afin de pouvoir configurer un sélecteur qui sélectionne toutes les entrées avec le paramètre? Bascule? classées, puis utilisez le sélecteur frère pour cibler l’image et définissez son opacité sur zéro. Pour rendre l'effet un peu plus agréable, ajoutez une transition simple.
Essaye le
Avec cela, la première méthode est terminée. Ci-dessous, vous devriez pouvoir voir un lien vers la page CodePen. Vérifiez-le et revenez ici pour le reste!
Démo: Cliquez ici pour le voir sur CodePen.
Méthode 2
La première méthode mise de côté, il est temps d'explorer la méthode n ° 2, qui implique l'utilisation d'un libellé de case à cocher. Ceci est ajouté directement avant l'entrée. Notez que le? Pour? valeur correspond à l'ID de la case à cocher. Nous jetterons également les deux images dans notre code HTML afin de changer les choses.
CSS
Encore une fois, nous allons commencer par ajouter quelques styles de base à la div. Il n’ya rien de vraiment spécial ici, juste quelques dimensions et positionnement.
Maintenant pour quelque chose de nouveau.N'oubliez pas que cette méthode implique l'utilisation de l'étiquette de la case à cocher à la place de la case à cocher elle-même. Pour ce faire, configurez l’affichage sur Bloc et donnez-lui des dimensions. Nous avons inclus le texte? Cliquez sur moi? dans le code HTML ci-dessus, nous aurons besoin de styler cela également. Essentiellement, nous transformons simplement l'étiquette pour lui donner l'aspect d'un bouton.
En survol, j'ai modifié les couleurs et ajouté le curseur de pointeur pour renforcer l'idée qu'il s'agit d'un élément cliquable.
Il est maintenant temps de masquer à nouveau la case à cocher, mais nous allons procéder différemment afin de vous montrer que nous pouvons le faire. En attribuant un positionnement absolu et certaines valeurs de positionnement délirantes, nous décocalisons la case à cocher. Rappelez-vous que cela fonctionne car nous pouvons toujours cliquer sur l'élément label pour retirer la bascule.
Pour terminer cette version, nous avons besoin de trois autres blocs de style. Le premier positionne la seconde image directement sous la première image. À partir de là, nous utilisons le même code que celui que nous avons utilisé la dernière fois pour modifier l'opacité lors du basculement et ajouter une belle transition.
Essaye le
Nous avons terminé la deuxième méthode maintenant, essayez-la ci-dessous en cliquant sur le lien.
Démo: Cliquez ici pour le voir sur CodePen.
Ce travail de JavaScript n'est-il pas?
Sans aucun doute, ce sont des choses amusantes. Avec seulement un petit peu de CSS et HTML, nous avons pu créer un joli petit événement clic. Les avantages sont clairs: code bref, pas de JavaScript, facilité d’implémentation, etc.
Malheureusement, les deux méthodes que nous avons évoquées sont assez taboues dans certains milieux. C'est parce qu'ils sont tous les deux une bâtarde de l'élément checkbox. Nous n'utilisons pas vraiment l'élément? Sémantiquement? ce qui veut dire comment il était vraiment destiné à être utilisé, au lieu de cela nous volons sa fonctionnalité et l'enveloppons autour d'autres objets.
Alors, quelle est la gravité de cette infraction? Cela dépend de qui vous parlez. Un codeur de la vieille école vous dira que c'est une mauvaise nouvelle. Utiliser un mannequin JavaScript, c'est pour ça! Malgré cela, bon nombre des didacticiels CSS plus impressionnants publiés en ligne récemment utilisent des astuces similaires (une variante utilise des boutons radio à la place), bien qu’ils ne le fassent pas vraiment. Certaines d'entre elles sont si impressionnantes que vous ne pouvez tout simplement pas résister à l'idée de jeter des sémantiques au vent et de passer au-delà de ce que vous pouviez auparavant être possible avec uniquement du CSS.
Avec cet article, j'ai cherché à expliquer comment cette technique fonctionne à un niveau élémentaire et à souligner qu'elle est au moins considérée comme controversée.
Devrais-je utiliser ceci plus souvent?
J'écris des tutoriels CSS pour gagner ma vie. Chaque jour, j'essaie de penser à de grandes choses que je peux vous apprendre. Des méthodes comme celles-ci posent un dilemme intéressant. Ils ouvrent de telles possibilités pour réaliser d’incroyables démos CSS. Cependant, certains pourraient considérer cela comme une perte de temps compte tenu de l'application sémantique discutable.
Ici, je vous le renvoie, lecteurs du Design Shack. Qu'est-ce que tu penses? Dois-je vous montrer des trucs sympas, même s'ils font des sacrifices sémantiques? Voulez-vous voir des démos plus sympas construites avec les deux méthodes décrites dans cet article? Comment pouvez-vous améliorer cette astuce? J'aimerais entendre vos pensées!