4.5 KiB
| title | subtitle | lang | draft | slug | excerpt | tags | type | createdAt | |
|---|---|---|---|---|---|---|---|---|---|
| Liens visités et indication visuelle | Comment différencier les liens déjà cliqués | fr | false | visited-links | Petit hack CSS |
|
snippets | 2023-06-06T18:34:00.000Z |
La théorie
Il est possible sur le web d'appliquer un style différent aux liens déjà visités par un utilisateur. Par défaut, un lien non visité est bleu tandis qu'un lien visité est violet.
Généralement, ces styles sont modifiés, voire supprimés dans le cas des liens visités. L'information qu'un lien a déjà été visité ne semble pas indispensable à la navigation. C'est sûrement vrai, mais personnellement, je suis assez content d'avoir un rappel des pages que j'ai déjà consultées lorsque je navigue.
Une information uniquement communiquée par la couleur est faillible, car certaines personnes ne distinguent pas les couleurs correctement. J'ai alors cherché un moyen d'ajouter un élément graphique supplémentaire aux liens visités/non visités. La solution démontrée ici n'est certainement pas idéale, elle se rapproche plus d'une expérience, à priori inoffensive pour l'internaute.
La spécification
Quand je me suis intéressé à ce qu'il était possible de faire avec les liens déjà visités, j'ai découvert qu'extrêmement peu de propriétés CSS étaient autorisées. En effet, seulement des changements de couleurs sont disponibles. Ceci est dû au fait qu'il était possible de récupérer l'historique de navigation d'un utilisateur grâce aux styles des liens visités. Le sélecteur :visited a donc été restreint par les navigateurs afin de lutter contre cette brèche de la vie privée. Plus d'informations dans cet article.
La pratique
Que faire alors, en terme de style, quand on ne peut changer que des couleurs ?
D'après MDN, les propriétés suivantes sont modifiables :
colorbackground-colorborder-color(et les propriétés détaillées associées),column-rule-coloroutline-colortext-decoration-colortext-emphasis-color- Les composantes de couleur liées aux attributs SVG
filletstroke.
Changer la couleur d'un lien visité ne sera pas compris par les internautes, à moins de garder une colorimétrie proche de celle par défaut (bleu et violet).
En revanche, il est possible de " masquer " un élément en modifiant sa couleur pour qu'elle corresponde à la couleur du fond de la page ou de l'élément parent. On pourrait ainsi imaginer masquer une border ou un outline.
J'ai personnellement choisi de faire différemment. J'ai décidé d'utiliser un pseudo-élément ::before sur l'état non visité du lien puis de le masquer quand celui-ci devient visité.
Le code
a {
position: relative;
text-decoration: none;
}
a::before {
content: "";
position: absolute;
top: 50%;
left: 0;
inline-size: 2px;
block-size: 2px;
border-radius: 4px;
transform: translate(-6px, 0);
background-color: grey;
}
a:visited::before {
background-color: white;
}
Ces règles, utilisées dans la table des matières de mes articles, ajoutent une sorte de petite puce ou pastille au début du lien. Cette puce est ensuite passée en blanc sur fond blanc une fois que le lien est visité, ce qui la masque visuellement.
Accessibilité
On pourrait simplifier la règle et utiliser le caractère de puce directement dans la propriété content mais les lecteurs d'écran annonceront alors ce caractère lors de leur retranscription du lien. De plus, les lecteurs d'écrans annoncent déjà si un lien est visité avant de lire son intitulé.
Aller plus loin
Afin de pousser l'expérience un peu plus loin, j'ai tenté d'utiliser des éléments plus explicites pour signifier l'état visité du lien. Bien qu'encore assez imparfait, il est possible de créer un indicateur plus complet de lien visité.
L'idée est d'avoir un ::before et un ::after, chacun contenant une icône en base 64 blanche en tant qu'image de fond. Quand le lien est non visité, le ::before contient un fond coloré qui fait apparaître l'icône. Quand le lien passe en visité, le fond du ::before devient blanc et celui du ::after devient coloré, ce qui masque la première icône et affiche la deuxième.
Il est nécessaire de positionner les icônes côte à côte sinon elles se retrouveront l'une sur l'autre.