J'ai vu beaucoup de tutoriels ces derniers temps qui utilisent :cible en CSS pour réaliser quelques prouesses, alors je me suis dit que je prendrais le temps de bien comprendre et de dire comment et pourquoi cette syntaxe fonctionnait. Au lieu de suivre aveuglément le code de quelqu'un d'autre, vous devriez pouvoir utiliser cet outil en sachant ce qui se passe et en quoi il affecte le support du navigateur.
Lisez la suite pour tout savoir sur les fonctionnalités de base associées à la :cible pseudo-classe et comment vous pouvez étendre cette capacité à exécuter toutes sortes de choses folles avec du CSS pur. En cours de route, nous créerons d’excellents exemples de navigation et de diaporamas.
Qu'est-ce que: cible?
En CSS, :cible est un pseudo sélecteur de classe. Rappelez-vous de notre article sur: before et: after, que les pseudo-classes sont un moyen de sélectionner une partie entière de votre document HTML, tandis que les pseudo-éléments peuvent être utilisés pour sélectionner une? Sous-partie? d'un élément. Pour illustrer ce point, voici quelques exemples:
La pseudo-classe que vous connaissez probablement le mieux est :flotter, qui vous permet de déclarer un style spécial qui sera activé lorsque l’utilisateur passe la souris sur un élément. le :cible De même, la pseudo-classe autorise un style personnalisé qui sera activé en fonction d'un scénario spécifique.
Identifiants de fragment
L'événement spécial pour le :cible La pseudo-classe dépend de quelque chose appelé un identifiant de fragment. Leur histoire et leurs explications sont compliquées, mais tout ce que vous avez besoin de savoir, c'est que lorsque nous parlons d'identificateurs de fragment, nous faisons référence à un hashtag associé à un mot ou à une phrase à la fin d'un URI.
Ceux-ci sont utilisés pour? Cibler? un point spécifique dans une page HTML et sont associés à un ID (qui utilise également la syntaxe hashtag). Une fois couplé, l'URI peut être utilisé pour accéder à son ID d'accompagnement. Voici une page de démonstration rapide illustrant cette fonctionnalité.
Cette page contient une série de balises h1, chacune possédant un identifiant unique. Voici la structure de base:
Cette structure est associée à un simple menu de navigation composé d'éléments de liste contenant des balises d'ancrage. Chaque balise d'ancrage pointe vers l'un des identificateurs de fragment que nous avons configurés. La fonctionnalité ici est extrêmement pratique: lorsque vous cliquez sur l'un des éléments de la liste, la page passe automatiquement à l'en-tête correspondant. Donnez-lui un coup de feu pour le voir en action. Gardez à l'esprit que cela fonctionne avec du HTML pur, aucun CSS n'est nécessaire.
Exploitation: cible pour créer des événements de clic
Maintenant que nous avons une démonstration simple qui utilise des identifiants uniques et des identifiants de fragments, il est temps de sortir notre :cible pseudo classe. Quelque chose dans un :cible Le bloc de style ne sera activé que lorsqu'un identifiant de fragment est actuellement actif dans l'URI. Dans un sens, :cible peut être utilisé pour créer l’événement clic toujours insaisissable CSS.
Par exemple, supposons que nous voulions faire en sorte que l'élément sur lequel vous avez cliqué dans notre menu de navigation soit modifié. Cela permettra aux utilisateurs d'identifier clairement la section vers laquelle ils sautent. Pour ce faire, nous allons utiliser le sélecteur? H1: target? et ajoutez une certaine variation en fonction de la taille de la police, de la couleur et de la décoration du texte. Découvrez la démo ici.
L'animer
Vous êtes libre d'utiliser :cible à peu près comme vous utiliseriez :flotter, ce qui signifie que vous pouvez vous amuser en ajoutant des effets d’animation. Ici, nous avons ajouté une jolie petite transition pour le changement de couleur. Voir en direct ici.
Manipulation d'objets non ciblés
Supposons que nous voulions également modifier le paragraphe d'accompagnement lorsqu'une rubrique donnée est ciblée. Cela peut sembler difficile, car nous avons déjà configuré notre structure HTML pour que les identifiants uniques ne soient utilisés que sur les balises h1, mais rappelez-vous que CSS nous fournit un certain nombre de puissants sélecteurs. Nous pouvons en fait utiliser un clic sur l'élément ciblé pour manipuler d'autres objets sur la page.
Dans notre exemple, cibler l'élément de paragraphe après le clic sur l'h1 est aussi simple que d'extraire le combinateur frère associé. Le code est ci-dessous et la démo est ici.
Créer un diaporama CSS simple
Partant de ce constat, les développeurs ont mis au point une tonne d’excellentes applications permettant d’utiliser le :cible pseudo classe. Vous pouvez l'utiliser pour créer une interface à onglets CSS pur ou même un diaporama d'images. Voyons comment créer ce dernier.
Pour commencer, nous devons coder une liste non ordonnée. Chaque élément de la liste contiendra une balise d'ancrage pointant vers un identifiant de fragment, suivi d'une image avec un ID correspondant.
Maintenant, nous allons utiliser un positionnement intelligent pour tout mettre en place et bien sûr un peu :cible magie pour que tout fonctionne. Voyez si vous pouvez comprendre ce qui se passe ici avant que je vous guide.
Nous avons d'abord fait glisser nos éléments de liste vers la gauche, stylé le texte et appliqué un effet de survol. La partie intéressante à propos du positionnement est que nous avons extrait toutes nos images de la partie texte de leurs éléments de liste en utilisant la merveilleuse technique du positionnement absolu à l’intérieur d’un parent relativement bien placé. Lisez cet article pour tout savoir sur le fonctionnement de ce logiciel.
Ensuite, nous définissons l'index z de toutes les images sur -1, puis l'index z de l'image ciblée sur 1. Cela entraîne l'élément de la liste sur lequel vous cliquez pour amener l'image au-dessus des autres. Pour que la transition soit agréable et progressive, nous réduisons l'opacité des autres images à zéro et ajoutons une transition CSS3. Voir la démo du diaporama CSS pur ici.
Prise en charge du navigateur
le :cible pseudo class selector est un sélecteur de niveau trois CSS, qui offre un support impressionnant sur pratiquement tous les navigateurs? sauf bien sur pour IE. Bon vieil Internet Explorer supporte les sélecteurs CSS3 dans les versions 9 et 10, mais rien de plus ancien.
Pour cette raison, il est peu judicieux d'utiliser :cible sur tout ce qui affecte directement le succès de l'interaction utilisateur. Par exemple, il se peut que les styles facultatifs différenciant de nos premiers exemples, mais notre diaporama ne fonctionne pas du tout pour IE8 et les utilisateurs plus âgés.
Selectivizr à la rescousse
Comme pour tout problème de sélecteur IE CSS3, il existe en fait une solution assez simple qui vous permet d’utiliser :cible sans exclure les êtres humains tristes qui exécutent des versions obsolètes d'un navigateur créé par Microsoft: Selectivizr.
Il suffit de déposer dans votre bibliothèque JavaScript préférée, telle que jQuery ou MooTools, puis de coller un extrait de code provenant de Selectivizr. Le reste est traité de manière totalement automatisée. Selectivizr travaillera avec voodoo pour apporter un support de sélecteur CSS3 impressionnant pour IE6 et les versions ultérieures.
Conclusion
Utiliser des pseudo-classes peut être délicat, mais une fois que vous avez compris comment fonctionnent certaines d’entre elles, le type de choses que vous pourrez utiliser avec du CSS pur vous étonnera. La cible? La pseudo-classe est un excellent exemple de ce qui peut changer radicalement la façon dont vous structurez les interactions des utilisateurs. Assurez-vous simplement de ne pas fuir et de trop l'utiliser sans prendre en compte les ramifications que cela aura sur le support du navigateur.
Laissez un commentaire ci-dessous et laissez-nous savoir ce que vous pensez :cible. L'avez-vous déjà utilisé dans un vrai projet? Pourquoi ou pourquoi pas?