La pseudo classe :target n'est pas forcément un réflexe alors qu'elle peut rendre de nombreux services. L'appréhender et bien comprendre son fonctionnement est essentiel pour éviter d'utiliser des solutions plus compliquées.
Prenons le cas par exemple d'une section utilisant une balise que l'on voudrait faire apparaitre / disparaitre. La solution classique serait d'utiliser un code Javascript combiné à un code CSS pour permettre de faire apparaitre ou disparaitre une section.
La pseudo class :target permettrait-elle de remplacer l'usage de JS ?
Nous allons découvrir comment dans cet article. La pseudo classe va nous permettre de définir un état de base de l'élément, par exemple un Display: none; et de le changer lorsque la pseudo classe :target sera utilisé en le basculant sur Display:block;
Voila une section d'exemple, que l'on peut faire apparaitre au clic sur la section d'exemple. Vous constatez comme le lien sur l'ancre fait sauter la page pour placer cette section en haut de page. C'est assez désagréable.On peut alors penser à utiliser cette pseudo classe avec l'attribut visibility, mais le défaut avec cette technique est que la place occupée par la section reste le même et peut créer des espaces vides disgracieux.
La place occupée par cette section reste le même seul son aspect change.Dans cette section la couleur de base du fond est le gris, on peut le modifier pour le faire passer en noir, appliquer un liseret gris autour, et faire tous les changements que l'on souhaite. Toutefois, son point bloquant est encore le fait d'appeler l'ancre et de voir la page se déplacer brusquement.Cette pseudo classe est-elle compatible avec une classe ou seulement avec un id ? Bizarrement cette méthode est compatible avec une classe, si celle-ci est appelé comme un ID avec le #dans l'URL. Par exemple ce paragraphe est mi en forme par un CSS attribué à .classtarget:target et non à #classtarget:target, mais la manipulation fonctionne. Toutefois le saut jusqu'à la section intervient encore.Désavantage de cette méthode
Pour faire un Toggle On / Off on peut utiliser une méthode trouvée ici (https://www.digitalocean.com/community/tutorials/css-css-only-click-handler) et reparamétrer un lien dirigeant sur # ce qui permettra à l'URL d'être épurée de l'ancre et à la page de retourner à son état initial.
Ce qui veut dire qu'on va privilégier cette méthode pour des utilisations très ponctuelles : Un menu de navigation avec l'icôen Hamburger et la croix pour le fermer, une fenêtre modale, etc.
Mais à l'heure actuelle, on ne pourra pas remplacer une solution CSS + Javascript en finalité.
Les limites de la pseudo classe :target
Pour l'exemple, on m'a demandé récemment d'insérer une fonctionnalité de ce type sur un site Prestashop. J'ai donc insérer un custom CSS, un custom JS et appelé un hook Prestashop du descriptif de chaque catégorie pour les insérer sur la page catégorie du site client et améliorer ainsi son SEO sans perturber de trop le design.
Le site est visible ici : https://www.bache-plastique-protection.com/44-bache-pour-serre, et la section En savoir plus est la partie codée sur mesure, en respectant l'Overrdrive pour qu'en cas de mise à jour les modifications soient sauvegardées sur des fichiers tiers.