I selettori di attributo dei CSS3

I selettori di attributo dei CSS permettono di individuare i valori degli attributi e stilizzare l'elemento stesso. I CSS 3 introducono 3 nuovi selettori che possono trovare stringhe corrispondenti nel valore dell'attributo all'inizio, alla fine o in qualsiasi punto all'interno del valore.

Questo rappresenta un nuovo modo molto potente di stilizzare automaticamente gli elementi che corrispondono a dei criteri molto specifici. Nel presente articolo verranno presentati degli esempi sui selettori di attributo e si creeranno delle regole CSS le quali prevedono icone nei link in base al valore dell'attributo href.

All'articolo sono associati degli esempi nei quali si possono vedere i selettori di attributo in azione. E' possibile effettuare il download degli esempi e vederli in locale.

Inserire le icone

Prima di passare ai selettori dei CSS, vediamo come fare per aggiungere, prima o dopo un link utilizzando i pseudo selettori.

Si supponga di voler distinguere alcuni link aggiungendo l'attributo class con valore "favorite":

Lorem ipsum dolor sit amet, <a href="#" class="favorite">consectetuer</a> adipiscing elit. 

Vogliamo identificare i nostri link "favoriti" aggiungendo una icona di un cuore prima del testo linkato. E' facilmente ottenibile se si usa il pseudo-selettore :before

.favorite:before {content: url(icons/heart.png); }

Questa dichiarazione indica al browser di mettere l'icona heart.png prima di ogni elemento che abbia una classe denominata ".favorite. Di seguito l'esempio realizzato su un link, come nella Figura 1:

icona su link
Figura 1: L'icona è posizionata prima del link

E' possibile mettere l'icona anche dopo il link usando il pseudo-selettore :after

.favorite:after { content: url(icons/heart.png); }

Aggiungere icone contestuali

Vediamo adesso un esmpio più decorativo. Si voglia identificare ogni link di un file video posizionando icona video dopo il testo linkato.

Fino ad ora lo avremmo fatto aggiungendo una classe movie su ogni link, aggiungendo la regola CSS. Questa cosa potrebbe essere noiosa se si hanno molti link da contraddistinguere nella pagina.

Esiste già un identificatore unico nel link stesso: l'estensione del file ".mov" (o ".avi" o qualsiasi altra particolare estensione da inserire nel link come riferimento). Come possiamo utilizzare i CSS per identificare un link basato sull'estensione, magari da mettere alla fine del testo?

Qui entrano in azione i selettori dei CSS. Possiamo utilizzarli in questo modo: quando viene riconosciuto un valore all'interno di un attributo. Facciamo un esempio con i link che hanno come valore dell'attributo href il ".mov" alla fine:

a[href$='.mov']:after {content: url(icons/video.png);}

Il simbolo $= indica che si vogliono trovare corrispondenze con l'attributo href che termina con il valore .mov. Ancora una volta è stato usato il pseudo-selettore :after per poter mettere l'icona dopo il link, come riportato in Figura 2:

posizionamento icosa subito dopo il link
Figura 2: L'icona è posizionata subito dopo il link

Si può utilizzare tale tecnica per stilizzare i link che puntano ad altri tipi di files. Alla stessa maniera si possono aggiungere le icone che identificano files musicali, documenti Word o files PDF in modo tale che gli utenti possono vedere quale tipo di file, presente nel sito, andranno ad aprire.

Se si utilizza il pseudo-selettore :after, si può avere un risultato accettabile a livello di posizionamento dell'icona; altrimenti si potrebbe intervenire sul codice CSS per una più corretta visualizzazione:

a[href$='.mov']{
padding-right: 17px; 
background: url(icons/video.png) no-repeat right;
} 

In questo esempio è stato dato più spazio all'icona aggiungendo un padding alla destra del link; il risultato è riportato nella Figura 3:

padding inserito tra il testo e l'icona
Figura 3: Padding inserito tra il testo e l'icona

Entrambi i metodi per il posizionamento delle icone funzionano; si dovrebbe intervenire, via CSS, su posizonamento per ottenere il risultato voluto.

Nota: Per files di grandi dimensioni, sarebbe buona norma includere, all'interno del link stesso, l'indicazione della dimensione del file; questo permetterebbe agli utenti di sapere a quale file stanno puntando, la sua dimensione ecc.. in modo tale da continuare o meno, soprattutto se hanno una connesione lenta ad Internet. Per esempio:

<a href="/videofile.mov">Embiggen Movie (30M, formato .mov)</a>

Fino ad ora sono stati identificati i link che terminano con una particolare estensione. Cosa succede se abbiamo bisogno di individuare un link che inizia con una particolare stringa? Supponiamo, ad esempio, che vogliamo individuare tutte le e-mail con una icona. Si ricorda che i link agli indirizzi e-mail sono preceduti da mailto:, come nell'esempio:

<a href="mailto:nome-username-di-esempio.com">contatti</a>

Quindi, per stilizzare tutti i link che cominciano per "mailto:, si deve utilizzare la seguente regola:

a[href ^="mailto:"]{ 
padding-right: 18px; 
background: url(icons/email.png) no-repeat right; 
}

Il codice ^= indica che si vogliono trovare corrispondenze con i link che cominciano con la stringa mailto:. Il risultato è riportato nella figura 4:

icona email dopo il link mailto:
Figura 4: Icona email dopo il link mailto

Impostare le icone per le estensioni dei files

Si potrebbe anche voler scegliere alcuni tipi di link che terminano con determinate estensioni. Link di sottoscrizione ai feed rss, per eempio, terminano con .rss o .atom. E' possibile aggiungere più di un selettore di attributo ad una regola poarticolare, come nell'esempio:

a[href$='.rss'], a[href$='.atom']{ 
padding-right: 17px; 
background: url(icons/rss.png) no-repeat right;
} 

In questo modo l'icona dei feeds è stata aggiunta ad entrambi i tipi di link per la sottoscrizione, come mostrato in figura 5:

Icona posizionata dopo il link dei feeds
Figura 5: Icona posizionata dopo il link di sottoscrizione ai feeds

Infine, supponiamo si voglia selezionare i link che contengono una stringa in un punto qualsiasi del link. Per esempio: si vuole avere l'immagine di una stella dopo ogni link che contiene lo username? Si deve usare semplicemente *= per trovare i link con una particolare stringa in qualsiasi punto del valore dell'attributo:

a[href *="username"]{ 
padding-right: 17px; 
background: url(icons/star.png) no-repeat right;
} 

Quindi un link che punta a http://username.livejournal.com formattato con tale regola, sarà simile a http://twitter.com/username. Si veda la figura 6.

icona in base al valore dell'attributo
Figura 6: Inserimento di una icona in base alla stringa del valore dell'attributo

Conclusioni

I selettori di attributo forniscono un potente strumento per il targeting di determinati tipi di link all'interno di un documento HTML, e permettono di formattare automaticamente specifici tipi di link. Individuare le icone connesse a particolari link migliora l'usabilità di una pagina Web, in quanto consente agli utenti di sapere se essi fanno clic su un file, un indirizzo e-mail, un link esterno e così via.

Si noti che l'aggiunta di una icona è solo un modo per formattare un link. Si potrebbe cambiare il colore del testo o il colore di sfondo ed aggiungere una parola quale: "(pdf)" dopo ciascun file PDF. Sono altri modi per identifficare un link in maniera univoca.

Si noti, inoltre, che i CSS 3 contengono altri metodi per trovare una stringa in un valore di attributo. Per maggiori informazioni, si veda la specifica degi selettori di attributo nel sito del W3C.

Per quanto riguarda i browser, i selettori di attributo sono supportati dalla maggior parte di essi come Safari ed Opera, ad eccezione di IE7.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati