Il :visitedselettore di pseudo-classe può cambiare parte dello stile di un elemento anchor link ( ) se il browser dell'utente ha già visitato il collegamento. Ha lo scopo di aiutare gli utenti a distinguere la differenza tra i collegamenti che hanno e non hanno visitato.
a:visited ( color: gray; )Limitazioni e utilizzo
Vi è un certo problema di privacy :visited, vale a dire che un sito Web dannoso potrebbe avere collegamenti a tonnellate di siti Web con :visiteduno stile, quindi testare lo stile di visualizzazione dei collegamenti con JavaScript per segnalare a un server quali siti l'utente ha visitato. Ciò viola la privacy dell'utente e potrebbe potenzialmente rivelare informazioni di identificazione personale.
Di conseguenza, la maggior parte dei browser limita lo stile che può essere modificato sui :visitedcollegamenti e le informazioni sullo stile che possono essere riportate con il getComputedStylemetodo.
Questa è una buona conclusione di quella situazione.
Queste sono le proprietà che possono essere modificate con :visited:
colorbackground-colorborder-color(e le sue proprietà secondarie)outline-color- Le parti colorate delle proprietà
fillestroke
È possibile utilizzare :visitedper modificare queste proprietà solo se il collegamento le ha già nello :linkstato o "non visitato" . Non è possibile utilizzarlo per aggiungere proprietà che non sono già presenti nel collegamento. Per esempio:
È possibile modificare il background-colordi un :visitedcollegamento se l'elemento del collegamento aveva già un colore di sfondo.
Non è possibile aggiungere un background-colora un :visitedcollegamento se non aveva un colore di sfondo quando era un collegamento "non visitato".
Collega le pseudo-classi in ordine
È anche utile sapere che la maggior parte delle pseudo-classi di collegamento devono essere dichiarate in un ordine specifico. L'ordine è:
- Link
- Visitato
- Hover
- Attivo
Se includi lo :focusstile per il tuo collegamento, è normale aggiungerlo tra "hover" e "attivo".
Demo
Estensione :visited
Sebbene lo stile diretto per i :visitedcollegamenti sia limitato, ci sono molti modi intelligenti per estendere le opzioni per lo stile dei collegamenti visitati. Nel 2015 c'è stato un gran numero di post sul blog che condividevano nuove idee per lo stile dei :visitedlink:
Rivisitazione: visitati , di Joel Califa, mostra un esempio di utilizzo dello localstoragestile per i link visitati nel dominio.
Hacking: visitati , da Una Kravets, si capovolge :visitedaggiungendo un tag "non visitato" come :aftercontenuto ai collegamenti, che viene poi nascosto con uno scambio di colore di sfondo dopo che il collegamento è stato visitato.
Spingendo i limiti di: visitato con modalità di fusione CSS , da Stelian Firez, combina un piccolo trucco HTML attribuito a DuckDuckGo e background-blend-mode: screen;per far sfumare un'icona personalizzata accanto a un collegamento visitato.
Styling dei collegamenti visitati con SVG , da Dudley Storey. Usa le immagini SVG con fillset per abbinare il colore di sfondo della pagina quando il collegamento è nello :linkstato, quindi con un altro colore dopo il collegamento :visited. Il tutorial include anche un metodo alternativo che utilizza caratteri Unicode invece di SVG.
Relazionato
:link:active:hover:focus
Maggiori informazioni
:visitednelle specifiche W3C:visitedpresso MDN
Supporto browser
Tutti i browser lo supportano.