EDICIÓN 15-03-2013: Este problema sólo se da en Firefox. Los demás navegadores tienen alguna forma de evitar este problema de privacidad, o bien no les preocupa tanto como a Mozilla.

Las transiciones son uno de los efectos más llamativos que nos ofrece CSS3. Una multitud de propiedades puede animarse, creando interesantes efectos. Entre dichas propiedades se encuentra el color del texto e, inclusive, el de los enlaces. Sin embargo, los enlaces visitados plantean un problema de difícil solución.

El comportamiento esperado: transición de color en los enlaces

Si probamos el siguiente código en un navegador, veremos una transición fluida del color de los enlaces al cambiar de estado: verde de inicio, amarillo si pasamos el ratón por encima (:hover) o negro si hacemos foco con el tabulador (:focus). Al volver al estado por defecto, el color vuelve a cambiar gradualmente. Si pulsamos el enlace (y por tanto, ya lo hemos visitado) el comportamiento es el mismo.

<html>
<head>
    <title>Prueba enlaces</title>
    <style>
        a {
            transition: color 2s ease;
            color: green;
        }
        a:focus {
            color: black;
        }
        a:hover {
            color: yellow;
        }
    </style>
</head>
<body>
<a href="#">Enlace</a>
</body>
</html>

El problema: salto en la transición al definir el color de :visited

En el ejemplo anterior, no se establecía ningún color para el estado :visited, y era buscado. En el momento en el que establezcamos un color particular para los links visitados (y esto se hace ya de partida en muchos reset de CSS) la transición falla.

<html>
<head>
    <title>Prueba enlaces</title>
    <style>
        a {
            transition: color 2s ease;
            color: green;
        }
        a:link {
            color: green;
        }
        a:focus {
            color: black;
        }
        a:hover {
            color: yellow;
        }
        a:visited {
            color: pink;
        }
    </style>
</head>
<body>
<a href="#">Enlace</a>
</body>
</html>

Si probamos el código anterior en un navegador, y hemos visitado el enlace, vemos cómo el link tiene de partida el color rosa (establecido con :visited) y al cambiar de estado cambia bruscamente al verde del estado básico. Luego se hace la transición, desde el verde y no desde el rosa como debería, y al acabar vuelve otra vez bruscamente al rosa aunque no se cambie de estado. Al cambiar de estado se repite el proceso a la inversa (empezando desde el amarillo). Ni siquiera el establecer el código del estado básico (:link) explícitamente lo soluciona.

La razón: precaución por privacidad

La razón de este fallo son una precaución de seguridad, bastante antigua de hecho. Usando JavaScript se podría comprobar qué enlaces tienen el color establecido para los visitados y, por tanto, se podría saber qué paginas han sido visitadas por el usuario. Esto representa un problema de privacidad, y los navegadores optaron finalmente por la vía más directa: deshabilitar ciertas opciones para los links visitados. En el blog de mozilla se explica con más detalle.

¿La solución?

Hasta ahora no he encontrado ninguna solución completa, sólo parches:

  • No establecer color para los enlaces visitados (como en el ejemplo inicial) y depender del color por defecto del navegador: no muy fiable, y nada recomendable si el color por defecto (violeta, normalmente) no se distingue muy bien del color de fondo de tu web.
  • Usar las transiciones igualmente y aguantarse al ver los saltos en los cambios de color: si no estás pasando el ratón por encima de los enlaces visitados continuamente, es pasable…
  • Establecer el mismo color para los enlaces visitados y para el estado básico: así no hay salto, pero no se sabe qué enlaces ya se han visitado y cuáles no. En ciertos casos esto es muy engorroso.
  • No usar transiciones de color para los enlaces (muerto el perro, se acabó la rabia): Puede resultar un tanto extraño si se usan transiciones para otros elementos, u otro tipo de transición para los enlaces, y el color cambia bruscamente, pero es pasable…

Si estás leyendo esto y sabes de una solución perfecta, te agradecería que lo compartieras en los comentarios.

2 thoughts on “Problema con los enlaces visitados y CSS3 en Firefox

  1. Carlos buen día!!

    Para solucionar este problema basta con cambiar el orden de las pseudoclases, de la siguiente manera:

    1.- Link
    2.- Visited
    3.- Hover
    4.- Active

    y así no habrá problema alguno con el hover y el visited y parece que la explicación de esta solución es porque el navegador da mas importancia a lo ultimo que se define.

    Espero que te sirva de algo, a mi me sirvió muy bien.

    1. Hola Diego,

      Muchas gracias por tu comentario. He revisado tus indicaciones y, efectivamente, el orden de las pseudo-clases es importante a la hora de establecer los distintos estilos. Sin embargo, si esa fuera la causa del problema, la transición no se produciría de ninguna forma (ahora sí cambia bruscamente).

      De todos modos, tu comentario me ha servido para comprobar que este error sólo se da en Firefox, cuando yo pensaba que en Chrome también aparecía y no es así. No sé si los demás no son tan obsesivos con la privacidad como Firefox o es que tienen alguna solución para que no se pueda “explotar” ese sistema 😛

      Voy a modificar el artículo para indicar que sólo afecta a Firefox, gracias por ayudar a que me diera cuenta 🙂

Deja un comentario

Facebook