Nelle scorse settimane abbiamo visto come i fogli di stile CSS possano essere utilizzati per modificare le proprietà dei link (colore al passaggio del mouse, colore e sottolineatura). In questa guida tratteremo un argomento affine, vale a dire i link barrati che possono essere utilizzati ad esempio per segnalare collegamenti ormai obsoleti o non più funzionanti.
Una classe per i link barrati
L’effetto barrato su di un link si potrebbe facilmente generare definendo per il selettore a:link la proprietà text-decoration dei CSS ed attribuendovi il valore line-through. Tuttavia questo approccio porterebbe e barrare tutti link mentre il nostro obiettivi è quello di barrare solo i link non più funzionanti. Un metodo per risolvere questo problema consiste nel definire una classe che verrà poi applicata solo ai link da barrare. Un semplicissimo codice CSS che realizza questo concetto è il seguente:
.barrato {
text-decoration: line-through;
}
Con questo codice abbiamo definito una nuova classe denominata “barrato” il cui unico effetti è quello di applicare una barratura al testo mediante l’uso della proprietà text-decoration e del relativo valore line-through.
Uso della proprietà barrato
Per barrare un link sarà a questo punto sufficiente aggiungere una chiamata alla classe barrato all’interno del codice HTML che definisce il collegamento. Anche in questo caso un semplice codice di esempio avrà questa forma:
Questo è un <a href="http://example.com" class="barrato">link</a>
Come si può notare per generare un link barrato è sufficiente richiamare la classe CSS barrato all’interno del tag che definisce il collegamento. Il risultato (visbile anche nell’immagine che accompagna questa guida) sarà un link ancora cliccabile ma graficamente distinto dai collegamenti normali.