Applicare icone ai link con il CSS
Esiste un modo piacevole per sapere a cosa porta un link senza dover leggere l’indirizzo nella barra di stato del browser, si tratta di applicare una icona al link utilizzando semplicemente il CSS.
Questo articolo vi spiegherà come fare e come render il tutto supportato dai browser più recenti come Internet Explorer 7, Firefox e Safari.
Prima:
Scarica il documento!
Dopo:
Scarica il documento!
Le icone
Prima di tutto bisogna trovare, o disegnare, delle belle icone adatte in formato GIF. Possibilmente tutte delle stesse dimensioni, piccole e con lo sfondo trasparente.
Nel nostro esempio utilizzeremo icone 14 x 16 pixel.
Link ad un file Word
Link ad un file Excel
Link ad un PDF
Link mailto:
Link che manda ad un’altro sito
Link che apre un popup
Esempio 1 - Link ad un file PDF
Come primo esempio inizieremo con un link verso un file PDF.
Questo è il suo codice HTML:
<a href="misc/prezzi.pdf">Guarda il listino</a>
Il link generato dovrebbe risultare così:
Notare che non ci sono classi, id, etc.. per distinguere questo link da altri. Il motivo è che a noi basta sapere che questo link porta ad un file PDF.
Con dei nuovi selettori del CSS supportati in Internet Explorer 7, Firefox e Safari, è possibile applicare uno stile andando a leggere il valore di un attributo di un tag.
Ora applichiamo questo stile al HTML creato precedentemente:
a[href $='.pdf'] { padding-right: 18px; background: transparent url(icona_pdf.gif) no-repeat center right; }
E dovremmo avere un risultato del genere:
Come funziona? Lo stile CSS va a cercare tutti i tag A, successivamente controlla il contenuto dell’attributo HREF e vede se finisce con .pdf. L’uguale preceduto dal dollaro vuol dire proprio questo: “Se il valore di HREF finisce con .pdf allora applica questo stile”.
Questo serve per applicare lo stile a tutti i link verso file PDF, non solo a quello che abbiamo creato noi.
Esempio 2 - Link ad e-mail
Abbastanza chiaro finora, no? Ma come si fa quando la fine del link nel HREF che ci interessa è sempre variabile, come per esempio un link verso una e-mail?
Scriviamone il codice HTML:
<a href="mailto:mgquadro@mgquadro.com">Chiedi un preventivo!</a>
E applichiamo questo stile CSS:
a[href ^="mailto:"] { padding-right: 20px; background: transparent url(icona_mail.gif) no-repeat center right; }
Notare questo carattere ^ prima dell’uguale, funziona allo stesso modo del dollaro, ma invece di dire come deve finire un link indica come deve iniziare. Ora tutti i link con un valore nel HREF che inizia con mailto: avranno quello stile.
Ecco il risultato:
Esempio 3 - Multi classe
E’ possibile utilizzare lo stesso metodo con dei link classati:
<a href="webdesign.html" class="popup">Offerte Web Design</a>
Lo stile CSS utilizzato sarà questo:
a[class ="popup"] { padding-right: 18px; background: transparent url(icona_popup.gif) no-repeat center right; }
Molto semplicemente controlla se il tag A ha la classe popup.
Ma cosa bisogna fare se ci sono più classi per un singolo link?
<a href="webdesign.html" class="popup stilespeciale">Offerte Web Design</a>
Ora la classe non è più uguale a popup ma a popup stilespeciale. In questo modo lo stile precedente non funzionerà. E’ possibile però controllare i valori separati dagli spazi.
a[class ~="popup"] { padding-right: 18px; background: transparent url(icona_popup.gif) no-repeat center right; }
L’uguale preceduto dalla tilde (per scriverla tenere premuto l’Alt , digitare 0126 con il tastierino numerico e poi rilasciare l’Alt) permette di controllare se esiste la parola popup all’interno del valore dell’attributo CLASS, però la parola ricercata deve essere assolutamente separata dagli spazi.
Così va bene: prova popup test
Così non va bene: provapopuptest
Conclusioni
Ci si può sbizzarrire in molti modi grazie a questi selettori CSS per rendere il codice HTML più leggibile senza riempire i tag di classi.
L’unico lato negativo è che non è compatibile con i browser più vecchi, come Internet Explorer 6.
Fonte: Ask the CSS Guy
Tags: CSS
