Il supporto dei browser per i selettori CSS3

Ora che le cifre sull'utilizzo di IE6 e IE7 stanno diminuendo rapidamente, sempre più team di sviluppo stanno iniziando a eliminare il supporto per i browser più vecchi. Questo post fornirà una rassegna completa sul supporto per i selettori CSS3 nei browser più problematici (indovinate quali?). Ogni selettore è linkato direttamente al paragrafo di riferimento delle specifiche CSS3.
Il supporto dei browser per i selettori CSS3

Specifiche sulla traduzione

Di seguito la traduzione dell’articolo “Browser Support for CSS3 Selectors” di Louis Lazaris.

IE in calo

Ora che le cifre sull’utilizzo di IE6 e IE7 stanno diminuendo rapidamente, sempre più team di sviluppo stanno iniziando a eliminare il supporto per i browser più vecchi.

Molti lettori probabilmente hanno completamente rimosso IE6 dall’equazione e presto IE7 lo seguirà a ruota. Nonostante IE8 abbia ancora la più alta quota di ogni versione dei singoli browser, la fine di IE6/7 ci permette di essere più creativi con i selettri CSS.

Questo post fornirà una rassegna completa sul supporto per i selettori CSS3 nei browser più problematici (indovinate quali?). Ogni selettore è linkato direttamente al paragrafo di riferimento delle specifiche CSS3.

Selettori supportati in IE7+

Questi sono i selettori che siete limitati a usare se supportate IE7:

Selector Name Example
Universal Selector div *
Descendant and Type Selectors div p
article
Class and ID Selectors .example
#example
Chained Classes .another.example
Child Combinator div > p
Adjacent Sibling Combinator div + p
Attribute Selector a[href]
Common Pseudo-classes a:link
a:visited
a:hover
a:active
:first-child Pseudo-class p:first-child
:first-line / :first-letter Pseudo Elements p:first-line
p:first-letter
General Sibling Combinator h2 ~ p
Value Attribute Selectors input[type="text"]
p[class~="example"]
a[hreflang|="en"]
Substring Attribute Selectors img[src^="images/"]
a[href$=".pdf"]
body[href*="home"]

IMPORTANTE: nonostante il grafico qui sopra potrebbe suggerire che il supporto per questi selettori in IE7 è perfetto, non è in realtà così. Ci sono molti bug associati a questi selettori quando vengono usati in IE7. Potete leggere una descrizione della maggior parte, se non di tutti, nella recensione dei selettori su SitePoint.

Selettori supportati in IE8+

Sfortunatamente, IE8 non sembra avere molti extra ma ha molti meno bug rispetto a IE7. Se non mi sono sbagliato o non ho dimenticato qualcosa, qui ci sono i selettori supportati da IE8 e successivi:

Selector Name Example
All the selectors listed in the previous section, but with fewer bugs (See above)
:focus Pseudo-class a:focus
:before/:after Pseudo-elements p:before
p:after
:lang Pseudo-class :lang(fr) > blockquote

Selettori supportati in IE9/IE10

IE9 aggiunge molti dei nuovi selettori CSS3. Il supporto in IE9 e IE10 sembra identico, tranne forse per qualche bug e altre cose di poca importanza. Ecco qui la lista dei selettori supportati in IE9 e nel futuro IE10, il secondo dei quali non è ancora in versione stabile:

Selector Name Example
All the selectors listed in the previous section, but with fewer bugs (See above)
:empty Pseudo-class p:empty
:enabled and :disabled Pseudo-classes input:enabled
input:disabled
:checked Pseudo-class input:enabled
:checked
:first-of-type Pseudo-class li:first-of-type
:last-child Pseudo-class li:last-child
:last-of-type Pseudo-class li:last-of-type
:negation Pseudo-class input:not(type="submit")
:nth-child Pseudo-class p:nth-child(2)
:nth-last-child Pseudo-class p:nth-last-child(2n+1)
:nth-last-of-type Pseudo-class dt:nth-last-of-type(2)
:nth-of-type Pseudo-class img:nth-of-type(2n)
: only-child Pseudo-class p:only-child
: only-of-type Pseudo-class li:only-of-type
:root Pseudo-class :root
::selection Pseudo-element * p::selection
:target Pseudo-class :target
:indeterminate Pseudo-class :indeterminate

* Lo pseudo elemento ::selection ha un buon supporto nei browser non IE ma, per varie ragioni, è stato rimosso dalle specifiche.

E gli altri browser?

Come sempre, qualsiasi discussione di “supporto browser” può anche essere chiamata “supporto IE”, perchè tutte le versioni in uso degli altri browser hanno un buon supporto per tutti i selettori sopra indicati, e con meno bug.

Oltre a ciò che è stato mostrato sopra, ci sono alcuni altri selettori CSS3 che sono supportati da Chrome, Firefox, Safari e Opera, ma non hanno supporto in nessuna versione di Internet Explorer. Potete vedere alcuni di questi misteriosi selettori su questa recensione MSDN (guardate la colonna IE9 dove il supporto è segnato “NO”) o cercando su internet “MDN CSS Reference“. Potete anche vedere molti dei selettori non IE nel “CSS3 User Interface Module” su W3C.

Non dimenticate Selectivizr

Per aggiungere supporto ai vari selettori CSS non supportati da IE7 e IE8, potete usare l’utility JavaScript Selectivizr, che aggiunge supporto per “19 pseudo classi CSS3, 2 pseudo elementi e qualsiasi selettori di attributo alle versioni più vecchie di IE”.

Conclusioni

Non li ho testati tutti. Ho usato un po’ di recensioni diverse per compilare e trovare supporto a quello che ho elencato qui, ma qualcosa potrebbe essere errato. Quindi usate questa come una guida ma testate scrupolosamente (è proprio necessario dirlo?).

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github