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:

• CSS Compatibility and Internet Explorer

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:

• Stili specifici per Internet Explorer con i commenti condizionali
• Risoluzione dei problemi dei CSS: i commenti condizionali
• Risoluzione dei problemi dei CSS
• Hack per IE7
• I CSS in Internet Explorer 7
• Hack vs. commenti condizionali