Mettre en évidence les liens visités — et pourquoi le CSS permet si peu
Des résultats de recherche, une liste d'articles, de la documentation — et aucun moyen de savoir quels liens vous avez déjà ouverts. Une règle CSS corrige cela. Et au passage, il vaut la peine d'apprendre pourquoi le sélecteur :visited est si bizarrement réduit.
La règle
Dans l'onglet CSS de la règle, motif d'URL pour une page avec des listes de liens ou * globalement :
a:visited {
color: #9333ea !important;
}
C'est tout. Les liens visités deviennent violets. Choisissez une couleur fortement différente de la couleur de lien normale pour que le contraste se lise instantanément.
Pourquoi si peu est possible
L'instinct naturel : si je peux changer la couleur, j'ajouterai aussi une icône ou un fond. Vous ne le ferez pas — et c'est délibéré.
Si :visited autorisait des styles arbitraires, n'importe quelle page pourrait détecter votre historique. Elle insérerait un millier de liens cachés, donnerait à chacun une taille ou un fond différent via :visited, mesurerait la mise en page avec JavaScript et lirait quelles URL vous aviez visitées. C'était une vraie vulnérabilité (history sniffing) — et les navigateurs l'ont fermée.
Ce qui est permis, ce qui ne l'est pas
Sur :visited, seules les propriétés de couleur fonctionnent : color, background-color, border-color, outline-color. Et même celles-ci sont « mensongères » dans un sens :
- Aucune propriété de mise en page.
display,font-size,content,visibility— ignorées sur:visited. C'est pourquoia:visited::after { content: " ✓" }ne fonctionnera pas. - getComputedStyle ment. Interrogé sur la couleur d'un lien visité, il renvoie la couleur non visitée — pour que JavaScript ne puisse pas lire la vérité.
- Le fond et la bordure doivent être visibles au préalable. Vous pouvez changer la couleur d'un fond, mais vous ne pouvez pas l'« allumer » à partir de rien de façon mesurable.
Vous voulez plus que la couleur ?
Badges, icônes, compteurs de visites — :visited ne vous les donnera pas. Ils exigeraient de suivre votre historique en JavaScript, ce qui est un sujet distinct et bien plus lourd. Dans la plupart des cas, la couleur seule suffit largement — car la seule chose dont vous avez vraiment besoin, c'est « suis-je venu ici ou non ».
Pièges
- Correspondance d'URL exacte.
:visitedfonctionne si vous avez visité exactement cette adresse. Un lien vers/articlene s'allumera pas si vous étiez sur/article?ref=x. - SPA et liens. Dans une single-page app, une « navigation » peut être un changement d'état sans navigation réelle — le navigateur n'enregistre alors aucune entrée d'historique et
:visitedne s'applique pas. - Contraste. Le violet sur fond blanc est lisible ; sur un thème sombre, choisissez une teinte plus claire.
À voir aussi
- Exemples — ce snippet et d'autres CSS prêts à l'emploi
- Mode sombre pour n'importe quel site — une autre règle CSS axée confort
- Masquer les bannières cookies — désencombrement de page basé sur CSS
Installez JustZix — et sachez d'un coup d'œil où vous êtes déjà allé.
Notez cet article
Aucune note — soyez le premier.