Resalta los enlaces visitados — y por qué el CSS permite tan poco
Resultados de búsqueda, una lista de artículos, documentación — y ninguna forma de saber qué enlaces ya has abierto. Una regla CSS lo resuelve. Y por el camino vale la pena aprender por qué el selector :visited está tan extrañamente reducido.
La regla
En la pestaña CSS de la regla, patrón de URL para una página con listas de enlaces o * globalmente:
a:visited {
color: #9333ea !important;
}
Eso es todo. Los enlaces visitados se vuelven morados. Elige un color fuertemente distinto del color del enlace normal, así el contraste se lee al instante.
Por qué se puede hacer tan poco
El instinto natural: si puedo cambiar el color, añadiré también un icono o un fondo. No lo harás — y es a propósito.
Si :visited permitiera estilos arbitrarios, cualquier página podría detectar tu historial. Insertaría mil enlaces ocultos, daría a cada uno un tamaño o un fondo distinto mediante :visited, mediría el layout con JavaScript y leería qué URLs has visitado. Era una vulnerabilidad real (history sniffing) — y los navegadores la cerraron.
Qué está permitido, qué no
Sobre :visited funcionan solo las propiedades de color: color, background-color, border-color, outline-color. E incluso estas se «mienten» en una dirección:
- Ninguna propiedad de layout.
display,font-size,content,visibility— ignoradas en:visited. Por esoa:visited::after { content: " ✓" }no funcionará. - getComputedStyle miente. Consultado sobre el color de un enlace visitado, devuelve el color no visitado — así JavaScript no puede leer la verdad.
- Fondo y borde deben ser visibles de antemano. Puedes cambiar el color de un fondo, pero no puedes «encenderlo» de la nada de forma medible.
¿Quieres más que el color?
Badges, iconos, contadores de visitas — :visited no te los dará. Requerirían rastrear tu historial en JavaScript, que es un tema separado y mucho más pesado. Para la mayoría de los casos solo el color basta y sobra — porque lo único que de verdad necesitas es «he estado aquí o no».
Trampas
- Coincidencia por URL exacta.
:visitedfunciona si has visitado exactamente esa dirección. Un enlace a/articulono se iluminará si has estado en/articulo?ref=x. - SPA y enlaces. En una single-page app una «navegación» puede ser un cambio de estado sin navegación real — el navegador entonces no registra ninguna entrada de historial y
:visitedno se aplica. - Contraste. El morado sobre fondo blanco es legible; en un tema oscuro elige un tono más claro.
Mira también
- Ejemplos — este snippet y otro CSS listo para usar
- Modo oscuro para cualquier sitio — otra regla CSS orientada a la comodidad
- Oculta los banners de cookies — adelgazamiento de la página basado en CSS
Instala JustZix — y sabe de un vistazo dónde ya has estado.
Valora este artículo
Sin valoraciones — sé el primero.