Un peu d’interactivité avec la pseudo-classe :target

Menu, onglet, modal, pourquoi ne pas amener un peu d’interactivité sur un site sans forcément passer par du JS ?

Il existe en CSS une pseudo-classe très intéressante :target.

Si on regarde la définition du W3C de cette pseudo-classe, il s’agît d’un élément qui est la cible d’un lien (comme les ancres par exemple).

Prenons un petit exemple, pour montrer l’intérêt de ce :target.

Vous pouvez retrouver le code sur Codepen, c’est par ici.

Imaginons un bouton, représenté par une div qui portera l’id  bouton_menu, et que sera entouré d’un lien pointant sur l’ancre #menu dont le but sera de faire afficher le menu.

Puis un autre bloc, qui sera ce fameux menu et qui portera l’id menu

Le but va être d’afficher le bloc menu (qui par défaut est caché) en cliquant sur notre lien Afficher le menu.

Pour cela, dans la feuille de style, il suffit d’ajouter l’id ici #menu suivi de la pseudo-classe :target et d’ajouter entre accolade, le code qui va permettre de venir afficher le menu (en utilisant des transitions, si vous voulez faire du joli).

Pseudo classe :target

Faîtes un petit test en cliquant sur Afficher le menu. Génial, non?

Et tout cela en CSS.

Pour l’exemple, j’ai ajouté aussi un petit bouton Fermer pour que cela soit plus pratique.

Comme vous le voyez, cette pseudo-classe peut se révéler extrêmement pratique pour limiter l’utilisation du javascript tout en apportant une touche de dynamisme.

Concernant la compatibilité des navigateurs

La pseudo-classe :target est actuellement supportée par la plupart des navigateurs sauf IE8 et inférieur

Si vous souhaitez connaître exactement tous les navigateurs supportés, vous pouvez consulter cette page.

:target compatibilité

Une réponse sur “Un peu d’interactivité avec la pseudo-classe :target”

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.