Debido a problemas de privacidad del usuario, los navegadores más modernos limitan severamente la forma en que puede diseñar los enlaces visitados, lo que hace que este artículo sea bastante inútil. Puedes leer más sobre esto aquí.
Los navegadores web saben qué enlaces de una página han sido visitados por un usuario (es decir, hasta que se borra la memoria caché). Depende de usted, el diseñador, aprovechar el conocimiento de ese navegador web, si así lo desea. Estoy seguro de que no necesitas adivinar, todo esto sucede con CSS. Si elige no aplicar ningún estilo a los enlaces (elementos o elementos de “anclaje”), la mayoría de los navegadores tienen un estilo predeterminado que se aplica. Normalmente, azul con subrayado. En Firefox, los enlaces visitados se vuelven morados con subrayados.
Puede tomar el control del estilo de estos elementos de anclaje en su CSS apuntándolos con pseudoclases. El objetivo de este tutorial es obtener una marca de verificación antes de los enlaces visitados para obtener un buen indicador visual. Puedes ver un ejemplo de esto en vivo en el blog de Mike Davidson. Estaremos apuntando a la a: visitado pseudoclase, pero incluiré información sobre las otras pseudoclases de anclaje más adelante en este artículo.
El escenario perfecto para una pseudo-pseudo clase
Dado que el objetivo aquí es agregar la marca de verificación a los enlaces, este es un escenario perfecto para las pseudoclases “antes” o “después” en CSS. Estas clases le permiten especificar literalmente los elementos de la página y agregarles contenido, directamente desde el CSS. Aquí hay un ejemplo:
blockquote:before {
content: "From the article: ";
}Esto pondrá literalmente el texto “Del artículo:” antes de cada cita en bloque en su página. ¿Esto enturbia las aguas entre la separación del diseño y el contenido? Bueno … tal vez un poco. Pero no realmente. Simplemente no piense en estas adiciones de contenido como contenido, piense en ellas como estilo, algo extra para su diseño web. Debido a que esto existe únicamente en su CSS, este no es contenido que los lectores de pantalla verán o que lo incluirán en su fuente RSS.
¿Ves a dónde voy con esta pseudo-pseudo cosa?
a:visited:before {
content: "";
}Podemos orientar los enlaces visitados y luego agregar contenido antes de esto con esta declaración CSS. Ahora todo lo que tenemos que hacer es poner una marca de verificación en ese contenido. Esto no es tan intuitivo. No puede usar glifos regulares aquí como puede hacerlo en HTML. Por ejemplo, poniendo & reg; no funcionará en la mayoría de los navegadores. De hecho, verá esa cadena de caracteres en lugar del glifo de registro. En su lugar, usa una barra diagonal y el código ASCII para el carácter. 2713 es el código de una marca de verificación. Entonces tenemos:
a:visited:before {
content: "2713 ";
}¡Tada! ¡Hecho! Esto funciona perfectamente en Firefox, Opera, Safari y … Oh, espera …
Internet Explorer 6 no admite pseudoclases sin ancla
Awww, eso apesta. Aquí es donde debes preguntarte si te importa o no. Abrí el blog de Mike para ver si se ocupaba del problema de IE6. No, sus enlaces simplemente se vuelven grises y subrayados cuando se visitan, pero olvídese de la marca de verificación. Ésta es una forma completamente aceptable de mejora del diseño. ¿Usas un buen navegador? Bien por ti, obtienes características extra agradables. ¿Usas un viejo navegador de mierda? Eso está bien, la página aún se verá y leerá bien.
Pero ahora tengo mi corazón puesto en esto, ¡hagamos esto! Podemos hacer esto sin el uso de los selectores: before o: after, usemos simplemente a: visitado (que IE6 entiende muy bien), y modifiquemos ese estilo para incluir la marca de verificación. No va a ser texto, pero simplemente convertiremos esa marca de verificación en un gráfico y lo incluiremos de esa manera, compruébalo:
a:visited {
padding-left: 14px;
background: url(images/checkmark.gif) left no-repeat;
}Ahora podemos celebrar de verdad. ¡Hurra! Esto funciona bien en todos los navegadores. Consulte la página de ejemplo.
Los otros pseudo selectores de anclaje
- un enlace – Este no se usa mucho porque es algo redundante. Si es un elemento de anclaje, ya es un enlace. La razón por la que existe es por especificidad. Puede declarar un estilo aquí que no se convertirá en cascada a otro estilo de anclaje como lo haría si simplemente diseñara el elemento a solo.
- a: visitado – Ya conoces este. Esto es lo que usa para diseñar los enlaces que se han visitado, según lo decida su navegador.
- a: flotar – Este es el más común. Use esto para diseñar el estado de rollover de sus enlaces
- a: activo – Tengo que admitir que estuve confundido por este durante mucho tiempo. Esta es la mejor forma de explicarlo. El estado activo es lo que ves si tuvieras que haga clic y mantenga en un enlace. Por lo general, no verá el estado activo durante mucho tiempo, ya que es probable que la página lo lleve rápidamente a otra página. Sin embargo, creo que puede ser divertido con un poco de estilo. A veces, solo un cambio de color en el estado activo es un pequeño toque agradable.
Aquí hay una buena manera de recordar qué son las pseudoclases de anclaje.