← Todos los artículos

Tutoriales

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:

¿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

Mira también

Instala JustZix — y sabe de un vistazo dónde ya has estado.

Valora este artículo

Sin valoraciones — sé el primero.

Pruébalo tú mismo

Instala JustZix y pega cualquier snippet de este artículo. Dos minutos de cero a una regla funcionando en todos tus dispositivos.

Obtener JustZix

Funciones · Cómo funciona · Ejemplos · Casos de uso