: visitado - CSS-Tricks

Anonim

O :visitedseletor de pseudo-classe pode alterar alguns dos estilos em um elemento link âncora ( ) se o navegador do usuário já tiver visitado o link. O objetivo é ajudar os usuários a distinguir a diferença entre os links que eles visitaram e os que não visitaram.

a:visited ( color: gray; )

Limitações e uso

Há alguma preocupação com a privacidade :visited, ou seja, que um site malicioso possa ter links para toneladas de sites com :visitedestilo e, em seguida, testar o estilo visual dos links com JavaScript para relatar a um servidor quais sites o usuário visitou. Isso viola a privacidade do usuário e pode revelar informações de identificação pessoal.

Como resultado, a maioria dos navegadores restringe qual estilo pode ser alterado nos :visitedlinks e quais informações de estilo podem ser relatadas com o getComputedStylemétodo.

Este é um bom resumo dessa situação.

Estas são as propriedades que podem ser alteradas com :visited:

  • color
  • background-color
  • border-color (e suas subpropriedades)
  • outline-color
  • As partes de cores das propriedades fillestroke

Você só pode usar :visitedpara alterar essas propriedades se o link já as tiver no estado “não visitado” ou :link. Você não pode usá-lo para adicionar propriedades que ainda não estão presentes no link. Por exemplo:

Você pode alterar o background-colorde um :visitedlink se o elemento do link já tiver uma cor de fundo.

Você não pode adicionar um background-colora um :visitedlink se ele não tivesse uma cor de fundo quando era um link “não visitado”.

Vincular Pseudo-Classes em Ordem

Também é útil saber que a maioria das pseudoclasses de links devem ser declaradas em uma ordem específica. O pedido é:

  1. Ligação
  2. Visitou
  3. Flutuar
  4. Ativo

Se você estiver incluindo um :focusestilo para o seu link, é comum adicioná-lo entre “pairar” e “ativo”.

Demo

Estendendo :visited

Embora o estilo direto dos :visitedlinks seja limitado, existem muitas maneiras inteligentes de estender suas opções para estilizar os links visitados. Em 2015, houve uma grande safra de postagens de blog compartilhando novas ideias para :visitedlinks de estilo :

Revisitando: visitado , de Joel Califa, mostra um exemplo de uso localstoragepara estilizar links visitados dentro do domínio.

Hacking: visitado , de Una Kravets, vira :visitedde cabeça para baixo ao adicionar uma tag “não visitada” como :afterconteúdo dos links, que é então escondida com uma troca de cor de fundo após o link ser visitado.

Empurrando os limites de: visitado com modos de mesclagem CSS , de Stelian Firez, combina um pequeno truque de HTML atribuído a DuckDuckGo e background-blend-mode: screen;para esmaecer um ícone personalizado próximo a um link visitado.

Modelagem de links visitados com SVG , de Dudley Storey. Usa imagens SVG filldefinidas para corresponder à cor de fundo da página quando o link está no :linkestado e, em seguida, a outra cor após o link :visited. O tutorial também inclui um método alternativo usando caracteres Unicode em vez de SVG.

Relacionado

  • :link
  • :active
  • :hover
  • :focus

Mais Informações

  • :visited na especificação W3C
  • :visited em MDN

Suporte para navegador

Todos os navegadores suportam isso.