Evidenzia i link visitati — e perché il CSS permette così poco
Risultati di ricerca, una lista di articoli, documentazione — e nessun modo di capire quali link hai già aperto. Una regola CSS lo risolve. E lungo la strada vale la pena imparare perché il selettore :visited è così stranamente ridotto.
La regola
Nella scheda CSS della regola, pattern di URL per una pagina con liste di link o * globalmente:
a:visited {
color: #9333ea !important;
}
Tutto qui. I link visitati diventano viola. Scegli un colore fortemente diverso dal colore del link normale, così il contrasto si legge all'istante.
Perché si può fare così poco
L'istinto naturale: se posso cambiare il colore, aggiungerò anche un'icona o uno sfondo. Non lo farai — ed è voluto.
Se :visited permettesse stili arbitrari, qualsiasi pagina potrebbe rilevare la tua cronologia. Inserirebbe mille link nascosti, darebbe a ciascuno una dimensione o uno sfondo diverso tramite :visited, misurerebbe il layout con JavaScript e leggerebbe quali URL hai visitato. Era una vulnerabilità reale (history sniffing) — e i browser l'hanno chiusa.
Cosa è permesso, cosa no
Su :visited funzionano solo le proprietà di colore: color, background-color, border-color, outline-color. E perfino queste vengono «mentite» in una direzione:
- Nessuna proprietà di layout.
display,font-size,content,visibility— ignorate su:visited. Ecco perchéa:visited::after { content: " ✓" }non funzionerà. - getComputedStyle mente. Interrogato sul colore di un link visitato, restituisce il colore non visitato — così JavaScript non può leggere la verità.
- Sfondo e bordo devono essere visibili in precedenza. Puoi cambiare il colore di uno sfondo, ma non puoi «accenderlo» dal nulla in modo misurabile.
Vuoi più del colore?
Badge, icone, contatori di visite — :visited non te li darà. Richiederebbero di tracciare la tua cronologia in JavaScript, che è un argomento separato e molto più pesante. Per la maggior parte dei casi il solo colore basta e avanza — perché l'unica cosa di cui hai davvero bisogno è «sono stato qui o no».
Trappole
- Corrispondenza per URL esatto.
:visitedfunziona se hai visitato esattamente quell'indirizzo. Un link a/articolonon si illuminerà se sei stato su/articolo?ref=x. - SPA e link. In una single-page app una «navigazione» può essere un cambio di stato senza navigazione reale — il browser allora non registra alcuna voce di cronologia e
:visitednon si applica. - Contrasto. Il viola su sfondo bianco è leggibile; su un tema scuro scegli una tonalità più chiara.
Vedi anche
- Esempi — questo snippet e altro CSS pronto all'uso
- Modalità scura per qualsiasi sito — un'altra regola CSS orientata al comfort
- Nascondi i banner cookie — sfoltimento della pagina basato su CSS
Installa JustZix — e capisci a colpo d'occhio dove sei già stato.
Valuta questo articolo
Nessuna valutazione — sii il primo.