La conoscenza dei selettori CSS è forse la competenza più importante quando si applicano i fogli di stile ad una pagina web. Abbiamo già visto come le nozioni base dei selettori CSS bastano da sole per sfruttare la gerarchia del DOM, ad esempio per ottenere una sorta di ereditarietà tra regole CSS. Secondo il W3C, che è riconosciuto come la massima autorità nel definire gli standard del web (presenti e futuri), i selettori CSS1 e CSS2 sono circa una ventina. Nella pratica di lavoro quotidiano si finisce però con usarne molti di meno, per almeno due motivi:
- Ridondanza: qualsiasi effetto CSS è ottenibile in svariati modi, per cui è possibile assegnare una regola CSS come vogliamo, anche utilizzando solamente due o tre tipi di selettori (quelli che conosciamo meglio)
- Compatibilità: alcuni selettori CSS2, per quanto siano dichiarati come standard da anni, sono stati “snobbati” per molto tempo da qualche browser. Siccome uno dei requisiti più importanti di un sito web è la capacità di essere cross-browser, ovvero di essere visualizzato allo stesso modo da qualsiasi browser, il mancato supporto di un selettore è un motivo più che valido per evitare di usarlo
Con l'avvento imminente dei CSS3 è forse ora di correre ai ripari e colmare le eventuali lacune. Basta dare un'occhiata a questo articolo per rendersi conto di quanti siano i selettori CSS2. E' ragionevole pensare che quando il CSS3 sarà realtà, il supporto del CSS2 sarà consolidato. Andiamo quindi a vedere alcuni esempi di applicazione del selettore dell'attributo, che è forse quello meno conosciuto.
Selezione dell'attributo
Il modo più semplice di usare il selettore di attributo è
[my_attribute] { COLOR: green; }
che seleziona tutti gli elementi HTML aventi un attributo di nome my_attribute, non importa quale sia il valore dell'attributo. E' importante osservare che il selettore vale per qualsiasi documento, sia HTML che XML, per cui il nome dell'attributo può essere qualsiasi stringa!
In altre parole non dobbiamo preoccuparci di verificare se esiste davvero un attributo con quel nome nelle specifiche dell'HTML: possiamo tranquillamente inventarci il nome dell'attributo e applicare la regola che vogliamo! Consideriamo ad esempio l'elemento HTML
<p my_attribute="foo">Ciao mondo!</p>
e il selettore CSS scritto poco sopra. Nella pagina web la scritta “Ciao mondo!” verrà visualizzata in verde, anche se nelle specifiche HTML l'elemento p non prevede alcun attributo di nome my_attribute!
Questa particolarità del selettore dell'attributo risulta molto comoda proprio perché permette tanta libertà: pensiamo a tutte le volte che vogliamo selezionare gli elementi in base al loro ID, ma ci torna scomodo che ogni ID debba essere unico. La possibilità di “inventare” un attributo col nome che preferiamo assomiglia in parte alla possibilità di assegnare un ID unico, per cui mescolando ID e attributi “personalizzati” si possono risolvere molti casi apparentemente complicati (dopotutto anche l'ID è un attributo).
Ovviamente, oltre alla selezione “incondizionata” in base all'attributo che abbiamo appena visto, è possibile anche precisare il valore dell'attributo, o addirittura selezionare un match più specifico, ad esempio in base ad una parola contenuta nel valore dell'attributo. Valgono quindi le seguenti espressioni
[my_attribute=first]
[my_attribute|=the]
[my_attribute~=animale]
Il primo caso (my_attribute=first) seleziona tutti e soli gli elementi il cui valore dell'attributo my_attribute è esattamente first.
Il secondo caso seleziona gli elementi il cui valore dell'attributo inizia con la stringa the. Attenzione però: per “inizia” si intende il primo token del valore suddiviso usando il trattino “-” (hyphen) come separatore. La regola my_attribute|=the seleziona perciò elementi come
<tag_name my_attribute=”the-best-tag”>
<tag_name my_attribute=”the-biggest-tag”>
ma non seleziona gli elementi
<tag_name my_attribute=”the best tag”>
<tag_name my_attribute=”thebiggesttag”>
Il motivo di questo comportamento, che serve anche a ricordare la regola, è che la sintassi nasce con lo scopo di gestire l'attributo lang, il quale può assumere valori del tipo lang="en-us". Ecco perché torna utile contare la parole in base al trattino.
Il terzo caso, ovvero la regola my_attribute~=row, seleziona gli elementi in cui il valore dell'attributo contiene la parola row. In questo caso la sintassi nasce allo scopo di gestire l'attributo alt, che di solito ha un elevato valore semantico all'interno del documento. Ad esempio, se consideriamo gli elementi HTML
<img src="pluto.jpg" title="Foto di animale"/>
<img src="topolino.jpg" title="Un piccolo animale"/>
il selettore [my_attribute~=animale] ci permette di assegnare delle proprietà CSS a tutte le immagini che parlano in qualche modo di animali. La potenza di questo attributo chiaramente dipende da quando bene sfruttiamo l'attributo alt.
Come per gli altri selettori, anche il selettore dell'attributo può essere usato in combinazione con altri selettori per ottenere effetti molto interessanti. Alcuni esempi potrebbero essere
span[my_attribute=second] { COLOR: orange; }
#the_span[my_attribute=second] { COLOR: pink; }
.another > p[my_attribute=first] { COLOR: purple; }
Vale forse la pena verificare in prima persona se i browser che vogliamo supportare gestiscono correttamente questo selettore, e iniziare a sfruttarlo!
