IE7 CSS: selettori per Internet Explorer 7 e versioni successive

Perché questo articolo

Il tempo di IE6, per me, è giunto al termine. Non riesco e non voglio più garantire compatibilità per un browser degli anni 90 e non mi piace neanche dover ricorrere a javascript e quant’altro per “dopare” i vecchi browser e renderli compatibili con selettori e proprietà CSS3.

E’ inutile comprare una fiat Panda e pensare di montarci sopra un motore di una ferrari solo per correre più veloce, ti schianteresti dopo la prima curva perché mancherebbe una struttura idonea per supportare tali miglioramenti.

Mi è venuta l’idea di creare un articolo in cui analizzo ad oggi i selettori che IE7 supporta in maniera nativa, il tutto diviso per tipologie di selettori. Ne approfitto, per quelli che hanno da poco cominciato, per fare un ripasso con piccoli esempi pratici e spiegazioni.

Selettori base

I classici selettori (tag, classe singola e multipla, ID, discendenza, universale) sono pienamente supportati. Ecco alcuni esempi.

 

Tag, classe singola e multipla, ID

Oltre ai selettori di elementi (es:1) che consentono di selezionare un particolare elemento del DOM in base al suo tagName, esistono i cosiddetti selettori di classe e di ID (es 2, 3 e 4), che consentono di attribuire gli stili css con modalità indipendenti dagli elementi stessi. Se vuoi che un particolare elemento venga stilizzato in base ad una classe, nell’html dovrà essere inserita quella stessa classe o quello stesso ID come valore dell’attributo class o ID.

 

Discendente e universale

Molte delle potenzialità dei CSS si basano sulla relazione genitore-figlio degli elementi. Un selettore discendente serve proprio a selezionare elementi o classi/id di elementi che fanno capo ad un determinato padre. Nell’esempio numero 5, tutti gli elementi span contenuti in tutti i paragrafi del documento verranno selezionati e stilizzati. Differente invece è il selettore universale (es:6), che ci consente di selezionare indiscriminatamente tutti gli elementi della pagina o tutti gli elementi facenti capo ad un particolare tag con class o ID.

 

Selettori di relazione

Fondamentali sono i selettori definiti di relazione perchè consentono tramite i combinatori, rappresentati dai simboli che vedremo tra poco, di selezionare elementi del DOM che sono in stretta relazione con altri. Tutte le seguenti tipologie sono supportate da IE7.

 

Selettore Figlio

Questo selettore differisce dal selettore di discendenza perchè avrà validità solo sui figli di primo livello. Il combinatore (>) indica alla selezione di fermarsi al primo livello di alberatura. Piccolo esempio:

 

Selettore di fratelli adiacenti

Il simbolo (+) consente, all’interno di un selettore, di scorrere il DOM orizzontalmente per selezionare il diretto o i diretti fratelli immediatamente successivi.

 

Selettore di fratelli generici

Questo differisce da precedente perché elimina il vincolo della prossimità e consente di selezionare tutti i fratelli di pari livello sia contigui che non.

 

Selettori di attributo

Questi selettori sono molto potenti. Consentono infatti di operare delle selezioni in base ai vari attributi e ai loro corrispondenti valori. La categoria dei selettori di attributi è costituita da diverse varianti della stessa tipologia di selettore. Ecco spiegato in breve quali sono e a cosa servono:

Selettore [attr]

Seleziona gli elementi che che posseggono l’esatto attributo indicato. Nel caso seguente tutte le immagini che hanno come attributo “alt” verranno stilizzate con un bordo rosso.

Selettore [attr=”value”]

Seleziona gli elementi che posseggono l’esatto attributo e il suo corrispondente valore indicato tra virgolette. Nel caso seguente tutte le immagini che hanno come attributo “alt” e come valore “immagine”, verranno stilizzate con un bordo rosso.

 

Selettore [attr=”value”]

Seleziona gli elementi che posseggono l’esatto attributo e il suo corrispondente valore indicato tra virgolette. Nel caso seguente tutte le immagini che hanno come attributo “alt” e come valore “immagine”, verranno stilizzate con un bordo rosso.

 

Selettore [attr~=”value”]

Seleziona gli elementi che possiedono come attributo quello indicato nel selettore, il cui valore corrisponde ad una delle stringhe separate da spazi che compone il valore stesso. Nel caso seguente tutte le immagini che hanno come attributo “alt” e come valore “molto”, verranno stilizzate con un bordo rosso.

 

Selettore [attr^=”value”]

Seleziona gli elementi che possiedono come attributo quello indicato nel selettore e che possiedano come valore dell’attributo una stringa che comincia con la chiave indicata nel selettore. Nel caso seguente tutte le immagini che hanno come attributo “alt” e come valore una stringa che comincia con la parola “immagine”, verranno stilizzate con un bordo rosso.

 

Selettore [attr$=value]

Seleziona gli elementi che possiedono come attributo quello indicato nel selettore e che possiedano come valore dell’attributo una stringa che termina con la chiave indicata nel selettore. Nel caso seguente tutte le immagini che hanno come attributo “alt” e come valore una stringa che termina con la parola “bella”, verranno stilizzate con un bordo rosso.

 

Selettore [attr*=value]

In questo caso, il valore deve corrispondere per intero a quello contenuto nell’elemento, ma con la differenza che può trovarsi in qualsiasi posizione. Nel caso seguente tutte le immagini che hanno come attributo “alt” e come valore una stringa che contiene la parola immag”, verranno stilizzate con un bordo rosso.

 

Selettore [attr|=value]

Il valore del selettore deve corrispondere a una stringa separata da trattini indicata nel selettore. Nel caso seguente tutte le immagini che hanno come attributo “alt” e come valore una stringa che contiene come prima parola immagine”, verranno stilizzate con un bordo rosso.

 

Pseudo-elementi

Rispetto ad un paragrafo che può o meno avere una classe o un id, rispetto ad un ancora, rispetto ad un div o ad un qualsiasi altro elemento tangibile del DOM, gli pseudo elementi, possono essere definiti tali ed hanno un senso solo se è il CSS a darglielo. Per quanto riguarda i primi due (first-letter / first-line) non c’è moltissimo da dire. I selettori in se già spiegano tutto e non c’è bisogno di aggiungere altro.

 

Generare contenuto

Discorso diverso invece va fatto per :before e :after, pseuso elementi che consentono di generare contenuto prima o dopo un dato elemento. Il supporto di IE7 non è completo al 100%. Il browser li riconosce entrambi ma non consente di utilizzarli per generare contenuto al loro interno (testo o immagini), tramite la proprietà content. Ciò non toglie che è possibile utilizzarli per creare oggetti funzionali; primo tra tutti? Il clear. Vediamo come:

 

Pseudo-classi

Questi particolari selettori hanno effetto solo nel momento in cui il puntatore del mouse interagisce con gli elementi. Tempo fa scrissi un articolo sulla pseudo-classe active che per IE7 e versioni inferiori ha effetto solo sui link e su nessun altro elemento del DOM. Per quanto riguarda le altre non c’è molto da dire, sono le classiche pseudo-classi esistenti fin dalle prime specifiche.

 

Pseudo-classi strutturali

C’è ne sono diverse a nostra disposizione ma per questo articolo ce ne interessa una sola ed è first-child. A quanto pare questa pseudo-classe è supportata su IE7 a patto che non vengano aggiornati dinamicamente gli elementi del DOM. Il selettore identifica il primo elemento di un parent.

 

IE7 CSS: in conclusione

Spero che dopo questo articolo tu possa lavorare con più serenità (si spera) strutturando il codice html e css in maniera tale da utilizzare il maggior numero di selettori compatibili con IE7.