Le :visitedsélecteur de pseudo-classe peut modifier une partie du style d'un élément d' ancrage link ( ) si le navigateur de l'utilisateur a déjà visité le lien. Il vise à aider les utilisateurs à faire la différence entre les liens qu'ils ont et ceux qu'ils n'ont pas visités.
a:visited ( color: gray; )Limitations et utilisation
Il y a un problème de confidentialité :visited, à savoir qu'un site Web malveillant pourrait avoir des liens vers des tonnes de sites Web avec un :visitedstyle, puis tester le style visuel des liens avec JavaScript pour signaler à un serveur les sites visités par l'utilisateur. Cela viole la vie privée de l'utilisateur et pourrait potentiellement révéler des informations d'identification personnelle.
En conséquence, la plupart des navigateurs limitent le style qui peut être modifié sur les :visitedliens et les informations de style qui peuvent être rapportées avec la getComputedStyleméthode.
C'est un bon aperçu de cette situation.
Voici les propriétés qui peuvent être modifiées avec :visited:
colorbackground-colorborder-color(et ses sous-propriétés)outline-color- Les parties couleur des propriétés
filletstroke
Vous ne pouvez utiliser :visitedpour modifier ces propriétés que si le lien les a déjà dans l'état «non visité» ou :link. Vous ne pouvez pas l'utiliser pour ajouter des propriétés qui ne sont pas déjà présentes sur le lien. Par exemple:
Vous pouvez modifier le background-colord'un :visitedlien si l'élément de lien avait déjà une couleur d'arrière-plan.
Vous ne pouvez pas ajouter un background-colorà un :visitedlien s'il n'avait pas de couleur d'arrière-plan lorsqu'il s'agissait d'un lien «non visité».
Lier les pseudo-classes dans l'ordre
Il est également utile de savoir que la plupart des pseudo-classes de liens doivent être déclarées dans un ordre spécifique. L'ordre est:
- Lien
- A visité
- Flotter
- actif
Si vous incluez le :focusstyle de votre lien, il est courant de l'ajouter entre "survol" et "actif".
Démo
Extension :visited
Bien que le style direct des :visitedliens soit limité, il existe de nombreuses façons intelligentes d'étendre vos options de style des liens visités. En 2015, il y a eu une récolte exceptionnelle d'articles de blog partageant de nouvelles idées pour styliser les :visitedliens:
Revisitant: visité , de Joel Califa, montre un exemple d'utilisation localstoragede style de liens visités dans le domaine.
Hacking: visité , de Una Kravets, se retourne :visiteden ajoutant une balise «non visité» comme :aftercontenu des liens, qui est ensuite masquée avec un échange de couleur d'arrière-plan après la visite du lien.
Repousser les limites de: visité avec les modes de fusion CSS , de Stelian Firez, combine une petite astuce HTML attribuée à DuckDuckGo et background-blend-mode: screen;pour fondre une icône personnalisée à côté d'un lien visité.
Styling Visited Links avec SVG , de Dudley Storey. Utilise des images SVG avec un fillensemble correspondant à la couleur d'arrière-plan de la page lorsque le lien est dans l' :linkétat, puis à une autre couleur après le lien :visited. Le didacticiel comprend également une méthode alternative utilisant des caractères Unicode au lieu de SVG.
En rapport
:link:active:hover:focus
Plus d'information
:visiteddans la spécification W3C:visitedchez MDN
Prise en charge du navigateur
Tous les navigateurs le prennent en charge.