Formattare i link visitati con i CSS

Per esempio... mi è capitato di vedere un testo con Line-Through (testo barrato al centro in orizzontale) sulla pseudoclasse :visited; oppure dei link con delle piccole iconcine grafiche associate, per indicare che si tratta di un link interno (di solito viene usata la freccia orizzontale); se invece si tratta di un link esterno, al posto dell'ormai poco usato (e male, secondo me, quando applicato) target="_blank", una freccetta verso l'alto o due quadratini sovrapposti ad indicare l'apertura di una nuova finestra. I casi possono essere molti e ci si può divertire come si vuole. Oggi vedremo queste piccole applicazioni che possono aiutare a rendere il nostro sito più gradevole ed asplicativo quando siamo in presenza di un link.

Va detto che non tutti i browser supportano gli esempi di cui ci occuperemo. Uno dei tanti... (ma devo proprio fare nome e cognome?) non prende per niente in considerazione gli pseudoelementi :before e :after. Non so se i cervelloni di Redmond li hanno implementati nella versione 7 (io ho rifiutato l'aggiornamento) ed uso soltanto Opera e Firefox per navigare. Ma lasciamo perdere eventuali critiche. Anzi... fatemene fare solo una: se lo conosci... lo eviti.

Line-Through

Bhè... usare questa pseudoclasse è molto semplice. Non si deve fare altro che dichiararla sullo stato :visited. Vediamo il codice, semplicissimo, seguito da una pagina di esempio:

a:link{
 color:#09d;
 text-decoration:none;
 }
 a:visited { 
 text-decoration: line-through; 
 color:#09d;
 }
 a:hover, a:focus, a:active{
 color:#700;
 text-decoration:none;
 }  

Non serve che ci soffermiamo nella spiegazione del codice; dovrebbe essere tutto molto semplice e familiare. Una pagina di esempio sarà molto più esplicativa. Piccola precisazione: tale effetto non sarebbe molto indicato in quanto non è il massimo dell'accessibilità. Tornando nella pagina in cui è presente il link, Firefox applica un bordo di 1px ed Internet Explorer 6 mostra almeno 3 pixel. Io lo eliminerei... (l'effetto o Internet Explorer?) Fate voi... conoscete la mia risposta :).

Immagine di background sullo stato :visited

Veniamo alla parte più simpatica di questi effetti. Vedremo adesso qualche esempio con immagini di sfondo visualizzate quando abbiamo visitato un link. In sostanza si tratta di creare delle iconcine grafiche di pochissimi bytes e richiamarle attraverso il codice CSS in questo modo:

a:link{
 color:#09d;
 text-decoration:underline;
 }
 a:visited { 
 text-decoration:none; 
 color:#bbb;
 padding-right: 14px; 
 background: url(linkVisitato.gif) no-repeat 100% 50%;
 }
 a:hover, a:focus, a:active{
 color:#900;
 }  

Come si può osservare dal codice appena scritto, l'immagine viene dichiarata solo nello stato :visited "preparando" lo spazio con un padding di 14 pixel (ma può variare in base alla grandezza dell'iconcina). Se non avete mai visitato il link associato al testo nella pagina di esempio, quando tornerete nella stassa pagina, vedrete una piccola iconcina a forma di "V" indicante, appunto, lo stato :visited.

Una piccola variante all'esempio che avete appena visto potrebbe essere l'associazione di 2 pseudoclassi: :visited:hover. Cosa potremo ottenere: una volta visitato un link avremo l'iconcina grigia come l'esempio precedente; se vogliamo che sia il testo che la stessa iconcina cambino colore (meglio se uguali), dobbiamo procedere nel seguente modo:

a:link{
 color:#09d;
 text-decoration:underline;
 }
 a:visited { 
 text-decoration:none; 
 color:#bbb;
 padding-right: 14px; 
 background: url(linkVisitato.gif) no-repeat 100% 50%;
 }
 a:visited:hover { 
 background-image: url(LinkVisitatoHover.gif); 
 color: #f00; 
 }  

Come si può vedere, ho associato le 2 preudoclassi e, sempre nello stesso codice, il "cambio" che deve subire l'immagine di sfondo quando passiamo con il mouse sul link visitato. Anche in questo caso ho preparato una pagina di esempio.

Pseudoelementi :before e :after

Piccolo ripasso: uno pseudoelemento seleziona una "sotto parte di un elemento" senza la necessità di scrivere una apposita marcatura XHTML. Nello specifico, :before e :after permettono di generare "dinamicamente" dei contenuti da aggiungere prima (before) o dopo (after) l'elemento al quale sono associati. C'è da dire che non tutti browser supportano questi pseudoelementi. Comunque... vediamo qualche esempio.

Vorremmo vedere un testo, dopo aver visitato un collegamento, del tipo: "Questo link lo hai già visto". Ecco come procedere:

a:link{
 color:#09d;
 text-decoration:underline;
 }
 a:visited { 
 text-decoration: none; 
 color: #214466;
 }
 a:visited:after { content: " (Questo link lo hai già visto)";  }
 

Soffermiamoci solo sul rigo di nostro interesse: a:visited:after; il testo che verrà inserito sarà quello che noi avremo deciso di scrivere tra parentesi tonde ("Questo link lo hai già visto"). Anche in questo caso ho preparato una pagina di esempio.

Stessa ed identica cosa se vogliamo visualizzare un testo generato prima di un link visitato. Riporto solo il rigo di codice che ci interessa:

a:visited:before { content: "(Testo prima del link) "; } 

Avete già capito come funzionerà. Anche in questo caso una pagina di esempio non guasta. :)

Associare una icona ad un link interno ed esterno

Anche in questo caso abbiamo visto moltissimi siti in cui sono presenti delle piccole immagini associate ad un link. In questo esempio vedremo come far intendere all'utente che sta per visitare un link esterno oppure una pagina interna al nostro sito.

Se avete seguito gli esempi sopra illustrati, non sarà per niente difficile applicarli al nostro caso. Andiamo a vedere il codice che ci interessa:

a:link{
 color:#09d;
 text-decoration:underline;
 padding-right:20px;
 background: url(LinkEsterno.gif) no-repeat 100% 50%;
 } 

Non abbiamo fatto altro che applicare sulla pseudoclasse :link una immagine di background; sarà importante verificare la larghezza del file grafico in modo tale da assegnare un padding-right adeguato al link. Settati gli altri stati del link, possiamo vedere come viene visualizzato nella pagina di esempio.

Come avrete avuto modo di vedere nella pagina precedente, ho anche inserito un link interno al sito, contraddistinto da una piccola freccia orizzontale. La sintassi da scrivere nel codice CSS non cambia per niente se non, ovvio, per il nome da dare alla piccola immagine. Rivediamo la pagina di esempio con un link interno. Questo è quanto.

Sperando di aver fatto cosa gradita con il presente articolo, ci si ritrova su queste pagine. :)