Presentare icone a fianco di link è un modo molto accativante ed efficace
per facilitare l'utente nell'identificarne alcune tipologie,
ad esempio file PDF, documenti Word, feed RSS e molto altro.
In questo articolo vedremo tre soluzioni semplici ed efficaci.
Vediamo subito il primo esempio e il suo screenshot:
Nell'HTML dell'esempio non si sono usate classi, immagini o markup aggiuntivo,
ma solo semplici link della forma <a href="">.
Se state consultando l'esempio con Internet Explorer 7,
Firefox, Safari o Opera noterete che a fianco ai link compare un'icona che ne identifica
la tipologia, proprio come nello screenshot sopra. Ciò è possibile grazie a una sola regola
per tipo che fa uso del selettore di attributo dei CSS di livello 3.
Vediamo come funziona.
Il selettore di attributo
Il selettore di attributo, già presente
nei CSS di livello 2.1, è stato potenziato nei CSS di livello 3.
In entrambi i casi viene indicato dalle parentesi quadre, che dovranno seguire un selettore semplice
(sia esso il selettore universale, di tipo, di classe o di id). Tra parentesi quadre verrà poi indicata
la caratteristica che un dato attributo dovrà soddisfare affinchè la regola venga applicata.
Per quanto riguarda i selettori dei CSS 2.1, rimando alle specifiche
di livello 2.1 e alla traduzione in italiano
delle specifiche dei CSS2, la cui sezione sugli attributi è identica a quella dei CSS 2.1. Riepilogando:
- selettore[att]
Individua gli elementi individuati da"selettore"che abbiano un dato attributo"att" - selettore[att="val"]
Individua gli elementi individuati da"selettore"che abbiano l' attributo"att"con il valore"val" - selettore[att~="val"]
Individua gli elementi individuati da"selettore"che abbiano un attributo che contiene esattamente la stringa"val"
oppure contiene la stringa "val" separata da spazi
Soffermiamoci invece sui selettori di attributo dei CSS 3, utili per la comprensione dell'articolo.
Attraverso questi selettori è possibile individuare elementi nel documento i cui attributi contengano
un dato valore. In particolare:
- selettore[att^="val"]
Individua gli elementi individuati da"selettore"che abbiano un attributo"att"che inizia con la stringa"val" - selettore[att*="val"]
Individua gli elementi individuati da"selettore"che abbiano un attributo"att"che contiene la stringa"val" - selettore[att$="val"]
Individua gli elementi individuati da"selettore"che abbiano un attributo"att"che termina con la stringa"val"
Uno degli usi più naturali è proprio applicare il selettore di attributo sull'href dei link per "filtrarli" in base al loro
url e/o alla loro tipologia: per esempio link esterni che puntano a pagine esterne (del tipo <a href="http://">),
link che puntano a file PDF o link che contengono "del.icio.us" nell'url. È proprio questa la tecnica alla base dell'esempio
presentato in apertura.
Esempio di base
Dopo questa breve premessa teorica, siamo pronti a ritornare all'esempio
di base, in cui vengono presentati alcuni link con icona. Attraverso il selettore di attributo andremo
ad individuare le varie tipologie, per poi semplicemente aggiungere del padding di 20px sulla destra del link
e l'icona di sfondo corrispondente, che verrà sistemata sulla destra del link e posizionata al
centro verticale. Ecco il CSS chiave dell'esempio:
a[href^="mailto:"]{padding-right: 20px;background: url(icon_mailto.gif) no-repeat center right}
a[href^="http"]{padding-right: 20px;background: url(icon_external.gif) no-repeat center right}
a[href*="del.icio.us"]{padding-right: 20px; background: url(delicious.gif) no-repeat center right}
a[href$=".pdf"]{padding-right: 20px;background: url(icon_pdf.gif) no-repeat center right}
a[href$=".doc"]{padding-right: 20px;background: url(icon_doc.gif) no-repeat center right}
a[href$=".zip"]{padding-right: 20px;background: url(icon_archive.gif) no-repeat center right}
a[href$=".rss"]{padding-right: 20px;background: url(icon_feed.gif) no-repeat center right}
In sostanza bastano quindi una sola icona e una regola CSS per realizzare link accattivanti
come nell'esempio. Presenterò alcuni approfondimenti e risorse per
questo approccio a fine articolo, ma prima ci sono alcune considerazioni da fare.
Alcune considerazioni
Ci sono alcune questioni da affrontare sull'esempio.
Per prima cosa, usa selettori CSS 3, che ad oggi sono un working draft, quindi
ancora non una versione definitiva. A tale proposito, c'è da considerare che in via
teorica il validatore CSS quindi dovrebbe
essere impostato sul profilo CSS 3.
Da notare che in realtà, al momento della pubblicazione di questo articolo, l'esempio
viene validato anche con il profilo di default, ovvero CSS 2.1,
com'è possibile constatare in questa pagina.
Non mi è chiaro se si tratti di un difetto del validatore, che verrà sistemato in futuro,
oppure un comportamento voluto.
Passando ai browser, l'esempio visto ha una buona compatibilità: funziona
infatti su IE7 e le ultime versioni di Opera, Firefox e Safari. Le icone non
vengono invece mostrate su IE6 e IE5.x. Le vecchie versioni di Internet Explorer
hanno ancora una discreta percentuale di utilizzo (all'incirca del 40% nel momento
in cui scrivo): vedremo con il secondo esempio un'alternativa se la compatibilità
dovesse essere un aspetto essenziale.
Infine, il primo esempio ha un difetto intrinseco:
se il link si dispone su due righe, l'icona purtroppo sparisce.
C'è un modo per ovviare a questo difetto, a patto di sacrificare la compatibilità
su IE7, e lo vedremo nel terzo esempio.
Estendere il supporto a IE5.5 e IE6
Eccoci quindi al secondo esempio che estende
la compatibilità a Internet Explorer 5.5 e 6. Non c'è purtroppo modo di estendere la
compatibilità anche a IE 5.0, dato che questo browser non è in grado di assegnare
il padding ad elementi inline quali i link. Questo browser è piuttosto
obsoleto, e conta una percentuale di utilizzo davvero poco significativa comunque.
Per prima cosa, c'è da notare che nel secondo esempio
si sono usate le classi nel markup: ad esempio, un link che
contiene un file PDF sarà scritto nell'HTML come <a href="document.pdf" class="pdf">.
Analogamente, si useranno classi quali "doc", "zip", eccetera per le altre tipologie di
file. Una volta assegnate le classi nel markup, l'approccio di sviluppo, e in particolare
la sezione dichiarativa di ciascuna regola, è identico: solo che verrà usato
il selettore di classe anzichè di attributo. Vediamo il CSS del secondo esempio:
a.mailto{padding-right: 20px;background: url(icon_mailto.gif) no-repeat center right}
a.external{padding-right: 20px;background: url(icon_external.gif) no-repeat center right}
a.delicious{padding-right: 20px; background: url(delicious.gif) no-repeat center right}
a.pdf{padding-right: 20px;background: url(icon_pdf.gif) no-repeat center right}
a.doc{padding-right: 20px;background: url(icon_doc.gif) no-repeat center right}
a.zip{padding-right: 20px;background: url(icon_archive.gif) no-repeat center right}
a.rss{padding-right: 20px;background: url(icon_feed.gif) no-repeat center right}
Lo svantaggio più significativo di questo esempio è l'assegnazione delle classi nel
markup, a fronte però di una maggiore compatibilità. Possiamo ora procedere con il
terzo esempio.
Risolvere il problema dei link su più righe
Per come vengono trattatti gli sfondi su elementi inline, non è purtroppo
possibile nei due esempi visti far si che l'icona sia visibile anche
nel caso in cui un link si disponga su due righe. Si può considerare un'alternativa
al primo esempio, ma implica il dover rinunciare
alla compatibilità con Internet Explorer 7.
Ecco quindi il terzo esempio, che usa il
generated content oltre che il selettore di attributo,
e il suo screenshot catturato su Firefox:
In sostanza si tratta di usare lo pseudo-elemento :after in
combinazione con il selettore di attributo e alla proprietà content
per poter aggiungere ad ogni link la relativa icona, senza dover ricorre agli
sfondi. L'icona verrà quindi "agganciata" al contenuto del link: rispetto agli altri
due esempi che usano il background, questa terza soluzione permette
quindi di stampare le icone di default, dato che è come se fossero parte del
documento invece di essere semplici sfondi. Lo si nota anche dal fatto
che, a differenza degli altri due esempi, le icone in questo caso sono sottolineate.
Vediamo il terzo esempio e lo sviluppo del
suo CSS. Come nel primo esempio visto, useremo il selettore di attributo
per individuare la tipologia dei link. In questo caso poi andremo a generare,
attaverso lo pseudo-elemento :after, un elemento da inserire al fondo ai
link che conterrà uno spazio vuoto seguito dall'icona, specificati attraverso
la proprietà content. L'icona verrà centrata poi rispetto al testo
attraverso la proprietà vertical-align. Ecco il CSS dell'esempio
per intero:
a[href^="mailto:"]:after{content: " " url(icon_mailto.gif);vertical-align: middle}
a[href^="http"]:after{content: " " url(icon_external.gif);vertical-align: middle}
a[href*="del.icio.us"]:after{content: " " url(delicious.gif);vertical-align: middle}
a[href$=".pdf"]:after{content: " " url(icon_pdf.gif);vertical-align: middle}
a[href$=".doc"]:after{content: " " url(icon_doc.gif);vertical-align: middle}
a[href$=".zip"]:after{content: " " url(icon_archive.gif);vertical-align: middle}
a[href$=".rss"]:after{content: " " url(icon_feed.gif);vertical-align: middle}
La compatibilità del terzo esempio è quindi estesa alle ultime versioni
di Opera, Firefox e Safari; le regole viste sopra non hanno effetto sulle versioni di Internet Explorer
fino alla 7 inclusa dato che questo browser non ha suppporto per il generated content.
C'è da evidenziare inoltre che, a differenza del primo
esempio, questo terzo esempio richiede che il validatore sia impostato sul profilo CSS 3
per superare la validazione, anche se entrambi in realtà fanno uso di selettori CSS 3.
Conclusioni
Abbiamo visto tre possibili strategie per avere icone accanto ai link, così da
agevolarne l'identificazione da parte dell'utente. Personalmente, anche se richiede
modifiche nel markup (ovvero l'aggiunta delle classi), la seconda soluzione è forse
da preferire per via di una compatibilità più estesa. Se non si volesse o potesse
intervenire sul markup, la prima soluzione qui presentata è la scelta ideale.
Per quanto riguarda la terza soluzione, credo che sia un po' troppo
azzardata per l'impiego attuale, data la sua compatibilità limitata e nonostante
il piccolo difetto di cui soffrono le altre due.
Ho ritenuto però opportuno e importante presentare un'alternativa, se non altro per
mostrare come sia possibile con i CSS ottenere diverse soluzioni.
Il primo esempio è stato ispirato da Showing Hyperlink Cues with CSS e
Iconize Textlinks with CSS. Da quest'ultima
risorsa provengono anche le icone qui utilizzate: vi potete trovare inoltre molte altre icone
e il CSS di base per le tipologie di link più comuni.
Termina qui l'articolo: gli esempi e le icone utilizzate in questo articolo sono disponibili
per il download. Alla prossima!
