CSS  »  Articoli  »  Effetti con CSS 

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:

Figura 1 - Screenshot dell'esempio

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.

Altri articoli

Altre guide

Altre newsletter