← Tous les articles

Tutoriels

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 :

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

À voir aussi

Installez JustZix — et sachez d'un coup d'œil où vous êtes déjà allé.

Notez cet article

Aucune note — soyez le premier.

Essayez vous-même

Installez JustZix et collez n'importe quel snippet de cet article. Deux minutes de zéro à une règle fonctionnelle sur tous vos appareils.

Obtenir JustZix

Fonctionnalités · Comment ça marche · Exemples · Cas d'usage