- Learn
- Guida CSS di base
- Compatibilità cross-browser e CSS per Internet Explorer
Compatibilità cross-browser e CSS per Internet Explorer
Per anni, il problema principale per gli sviluppatori alle prese con i CSS è stato quello della compatibilità cross-browser. L’imputato numero uno, per ammissione postuma della stessa Microsoft, era Internet Explorer. Questo browser ha raggiunto la piena compatibilità con la specifica CSS 2.1 solo con la versione 8, uscita nel marzo del 2009.
Nel momento in cui pubblichiamo questa seconda edizione della guida CSS, IE8 continua a detenere una percentuale ampia di utilizzo e, se non eccelle nel supporto dei CSS3, non rappresenta un problema per quello che è l’oggetto di questa guida, ovvero i CSS 2.1. Salvo piccole inconsistenze nell’intepretazione di questa o quella proprietà (dato comunque comune agli altri browser) e fatta eccezione per qualche bug (superato nelle versioni successive), possiamo sfruttare pienamente tutte le funzionalità analizzate nella guida.
Il discorso si complica se diventa necessario supportare le versioni 7 o addirittura 6 di Internet Explorer. Sono browser che vedono ormai un utilizzo residuale (intorno all’1% a febbraio 2013 secondo StatCounter), ma può capitare che venga richiesto di tenerne conto.
Quale strategia adottare per risolvere il problema della compatibilità? Prima di tutto è opportuno avere chiaro il quadro del supporto per le varie proprietà sulle diverse versioni di Internet Explorer. Il documento da cui partire è quello ufficiale di Microsoft:
Offre una lista dettagliata di tutte le proprietà CSS, indicando il supporto nelle versioni di IE dalla 5 alla 9.
Dal momento, comunque, che la versione problematica potrebbe alla fine risultare più che altro IE7 (dando per morto IE6), ecco una lista delle funzionalità CSS 2.1 che questo browser non supporta rispetto a IE8 e versioni successive:
- la pseudo-classe
:focus
; - gli pseudo-elementi
:before
e:after
; - il contenuto generato;
- la proprietà
border-spacing
per le tabelle; - la proprietà
empty-cells
per le tabelle; - la proprietà
caption-side
per le tabelle; - la proprietà
clip
; - la proprietà
outline
; - il valore
inline-block
per la proprietàdisplay
; - i valori legati alle tabelle per la proprietà
display
; - la definizione dei tipi di media con la direttiva
@-import
.
Oltre a presentare altri bug più o meno consistenti, IE7 presenta ancora una delle principali fonti di problemi nella gestione dei CSS: la proprietà hasLayout, finalmente e per fortuna eliminata su IE8.
Una volta individuato il problema, si può procedere alla soluzione. Negli anni gli sviluppatori hanno individuato tutta una serie di hack e workaround per scrivere regole CSS specifiche per Internet Explorer. Col tempo, però, si è affermata la soluzione più pulita e efficace, quella dei commenti condizionali.
Commenti condizionali per Internet Explorer
Si tratta di un meccanismo supportato da Microsoft fino alla versione 9 di Internet Explorer. Consente, all’interno del codice HTML, di definire parti interpretate solo da IE e non dagli altri browser.
Attraverso i commenti condizionali siamo in grado di scegliere come target una versione specifica di Internet Explorer, e di servire a quest’ultima un foglio di stile ad hoc che contiene le regole alternative o atte alla soluzione di questo quel problema. Ecco la sintassi di base:
<!--[if IE 7]>
<link rel="stylesheet" type="text/CSS" href="stile-per-IE7.css">
<![endif]–>
Se la pagina viene visualizzata su IE7, serviremo il foglio di stile specifico.
La sintassi è in grado di fare verifiche più complesse. Tenendo come riferimento primario IE8 e IE7, potremo avere:
<!--[if IE]>
– tutte le versioni di Internet Explorer;<!--[if IE 7]>
– versione 7 di Internet Explorer;<!--[if !IE 6]>
– tutte le versioni tranne la 6 di Internet Explorer;<!--;[if gt IE 7]>
– tutte le versioni superiori alla 7 (esclusa) di Internet Explorer;<!--[if gte IE 7]>
– tutte le versioni superiori alla 6 (compresa) di Internet Explorer;<!--[if lt IE 8]>
– tutte le versioni inferiori alla 6 (esclusa) di Internet Explorer;<!--[if lte IE 7]>
– tutte le versioni inferiori alla 6 (compresa) di Internet Explorer.
Prima di chiudere, una serie di link di approfondimento sul tema:
Se vuoi aggiornamenti su Compatibilità cross-browser e CSS per Internet Explorer inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
AMZ Team e il progetto Medical-box
Il team di ragazzi racconta l’idea che li ha postati sul podio italiano dell’edizione 2013 dell’Imagine Cup (secondi classificati).