El :visitedselector de pseudoclase puede cambiar parte del estilo de un elemento de enlace de anclaje ( ) si el navegador del usuario ya ha visitado el enlace. Está destinado a ayudar a los usuarios a distinguir la diferencia entre los enlaces que han visitado y los que no han visitado.
a:visited ( color: gray; )Limitaciones y uso
Existe cierta preocupación por la privacidad :visited, a saber, que un sitio web malicioso podría tener enlaces a toneladas de sitios web con :visitedestilo, luego probar el estilo visual de los enlaces con JavaScript para informar a un servidor qué sitios ha visitado el usuario. Esto viola la privacidad del usuario y potencialmente podría revelar información de identificación personal.
Como resultado, la mayoría de los navegadores restringen qué estilo se puede cambiar en los :visitedenlaces y qué información de estilo se puede informar con el getComputedStylemétodo.
Este es un buen resumen de esa situación.
Estas son las propiedades que se pueden cambiar con :visited:
colorbackground-colorborder-color(y sus subpropiedades)outline-color- Las partes de color de las propiedades
fillystroke
Solo puede usar :visitedpara cambiar esas propiedades si el enlace ya las tiene en el :linkestado o "no visitado" . No puede usarlo para agregar propiedades que aún no están presentes en el enlace. Por ejemplo:
Puede cambiar el background-colorde un :visitedenlace si el elemento del enlace ya tenía un color de fondo.
No puede agregar un background-colora un :visitedenlace si no tenía un color de fondo cuando era un enlace "no visitado".
Vincular pseudoclases en orden
También es útil saber que la mayoría de las pseudoclases de enlaces deben declararse en un orden específico. El orden es:
- Enlace
- Visitó
- Flotar
- Activo
Si incluye un :focusestilo para su enlace, es común agregarlo entre "hover" y "active".
Manifestación
Extensión :visited
Aunque el estilo directo de los :visitedenlaces es limitado, existen muchas formas inteligentes de ampliar sus opciones para diseñar los enlaces visitados. En 2015 hubo una gran cantidad de publicaciones en blogs que compartían nuevas ideas para diseñar :visitedenlaces:
Revisitando: visitado , de Joel Califa, muestra un ejemplo de cómo usar localstoragepara diseñar enlaces visitados dentro del dominio.
Hacking: visitado , de Una Kravets, se da la vuelta :visitedal agregar una etiqueta "no visitado" como :aftercontenido a los enlaces, que luego se oculta con un cambio de color de fondo después de que se visita el enlace.
Superando los límites de: visitado con modos de combinación CSS , de Stelian Firez, combina un pequeño truco HTML atribuido a DuckDuckGo y background-blend-mode: screen;para desvanecer un icono personalizado junto a un enlace visitado.
Diseño de enlaces visitados con SVG , de Dudley Storey. Utiliza imágenes SVG fillconfiguradas para que coincidan con el color de fondo de la página cuando el enlace está en el :linkestado, luego con otro color después del enlace :visited. El tutorial también incluye un método alternativo que usa caracteres Unicode en lugar de SVG.
Relacionado
:link:active:hover:focus
Más información
:visiteden la especificación W3C:visiteden MDN
Soporte del navegador
Todos los navegadores lo admiten.