Internet Explorer 7 è stato rilasciato in versione definitiva
a ottobre del 2006, ma ad oggi non non sono ancora presenti in rete risorse valide
con documentati bug e difetti di resa significativi, facilmente identificabili
e soprattuto riproducibili. Ciò può significare due cose: Internet Explorer 7 è un browser
robusto e presenta pochi bug e diffetti di resa... oppure sviluppatori, blogger
e articolisti non sono ancora stati in grado di individuare tali bug.
Quale che sia la ragione, è bene poter disporre di strumenti per poter aggirare
eventuali difetti di resa di IE7 senza dover compromettere la resa sugli altri browser.
Una classe di soluzioni nota con diversi nomi: hack, workaround e filtri.
La differenza di classificazione è piuttosto sottile: per come li intendo
i workaround si fondano su carenze del supporto dei CSS di un dato browser;
hack e filtri si basano invece su difetti e carenze del parser, tipicamente a una sequenza
di caratteri piuttosto che keyword e selettori non supportati come nel caso dei workaround.
L'ho espresso diverse volte negli articoli qui su HTML.it e sul blog:
hack e filtri andrebbero usati il meno possibile. I motivi sono sostanzialmente due.
Il primo è che molto spesso si può aggirare il problema in maniera indolore e a prova di futuro,
riconsiderando la soluzione adottata: se non si dovesse riuscire, c'è una classe di workaround
potenzialmente meno dannosa che si potrà usare. Il secondo motivo per non usare hack e filtri è che se
proprio non si riesce a sistemare, Internet Explorer dispone del
commento condizionale nel quale
è possibile relegare le regole necessarie senza intaccare la resa negli altri browser, garantendo
allo stesso tempo un buon controllo della soluzione adottata e confinata alla sola risoluzione
del problema.
Ma se da una parte il commento condizionale potrà rivelarsi pratico per certi versi, è
pur vero che implica la modifica del codice HTML delle pagine coinvolte e frammenta
il foglio di stile in due o più file. In certe situazioni queste due condizioni si possono
rivelare poco pratiche se non addirittura impossibili da adottare. In tali casi si potrà
quindi ricorrere ad hack, filtri e workaround, con un'accortezza indispensabile: accertarsi del
comportamento di tali soluzioni sui browser futuri.
Soluzioni simili introducono infatti intrinsecamente un'instabilità nel
foglio di stile, il cui comportamento è imprevedibile nei browser futuri. In quanto a Internet Explorer
7, c'è da evidenziare comunque che il più delle volte questa instabilità si potrà al massimo
ripercuotere solo nelle versioni future del browser di case Microsoft, e in particolare IE8.
Concludo questa lunga premessa con una precisazione: conoscere hack e workaround è importante
per poter risolvere bug e difetti di resa dei browser, ma la vera perfezione
sta nel riuscire a non utilizzarli. Siamo pronti per procedere.
Soluzione 1. Workaround per escludere IE con commento vuoto
Il primo workaround che vedremo è basato su un bug del parser di IE7 e il child selector
per creare una regola vista solo dai browser moderni (ovvero le ultime versioni di Firefox, Opera e Safari)
escludendo quindi tutte le versioni di IE fino alla versione 7 compresa. Ecco il codice:
div.test{background: yellow} /*per IE fino alla versione 7 inclusa */
html>/**/body div.test{background: lime} /*per gli altri browser*/
La seconda regola usa il child selector (non supportato da IE fino alla v.6)
e usa nel selettore un commento prima del body, che nasconderà
il blocco dichiarativo anche a IE7. Ecco la pagina di esempio.
Soluzione 2. Specificare una regola solo per IE7
Il secondo workaround è in grado di creare una regola specifica vista solo da IE7.
Vediamo il codice CSS:
div.test{background: green} /*per gli altri browser */
*:first-child+html div.test{background: yellow} /*per IE7 */
Ecco il relativo esempio. Questo approccio è
particolarmente indicato quando vorremo quindi creare regole indirizzate esclusivamente
a IE7 o, per differenza, a tutti gli altri browser, incluse le precedenti versioni di IE.
Soluzione 3. Usare lo pseudo-selettore :lang
Nel terzo esempio si è usato lo pseudo selettore :lang per nascondere
una regola intera a tutte le versioni di IE fino alla 7 inclusa. Da notare che in
questo caso, per poter adottare la tecnica, sarà necessario quindi specificare il
linguaggio del documento (es <html lang="it">).
Una soluzione simile si può rivelare quindi poco pratica rispetto alle due precedenti dato che,
su pagine già esistenti, implica la modifica del codice html. Ecco le due
regole dell'esempio:
div.test{background: yellow} /*per IE fino alla versione 7 */
html:lang(it) div.test{background: lime} /*per gli altri browser */
Soluzione 4. Usare il selettore di tipo con namespace
Nel quarto esempio viene usato il selettore di tipo con namespace
per creare una regola vista solo su Opera, Firefox e Safari, escludendo quindi le versioni
di IE fino alla 7. Tale selettore appartiene ai CSS di livello 3,
e seppur sia definito e lecito nelle specifiche W3C in proposito, al momento non passa
la prova del validatore CSS. Visto
che con una soluzione simile si dovrebbe validare con CSS di livello 3, ma che comunque
l'esito della validazione è negativo, una soluzione simile è altamente sconsigliata,
a favore delle tre precedenti. Ecco comunque le due regole dell'esempio:
div.test{background: yellow} /*per IE fino alla versione 7 */
*|html div.test{background: lime} /*per gli altri browser */
La tabella di compatibilità
Ho preparato una tabella di compatibilità, che include le quattro soluzioni
qui viste più alcune presentate negli articoli
Risoluzione dei problemi di CSS
e Box Model e workaround.
Si tratta di una pratica mini-reference, che potrà essere tenuta a portata di mano nei casi
(rari spero) in cui vi troverete in difficoltà con le varie versioni di Internet Explorer.
Esempio pratico
In conclusione di articolo ho preparato un esempio che,
al di là del suo scopo (praticamente nullo) mostra facilmente come sia possibile creare
dichiarazioni e/o regole per un dato browser, distinguendo attraverso hack e workaround
tra IE5.x, IE6, IE7 e gli altri browser moderni (Opera, Firefox e Safari).
L'esempio mostrerà quindi l'icona corrispondente
al browser in uso, come nel seguente screenshot:
In sostanza l'esempio fa uso di alcuni workaround
e filtri per creare dichiarazioni specifiche sul background. Ecco il CSS chiave:
div#tellme{
background: #FFF url(ie6.png) no-repeat center bottom; /*IE6*/
background /**/: #FFF url(ie5.png) no-repeat center bottom; /*IE5.x*/}
html>body div#tellme{
background: #FFF url(ofs.png) no-repeat center bottom; /*Opera, Firefox e Safari*/}
*:first-child+html div#tellme{
background: #FFF url(ie7.png) no-repeat center bottom; /*IE7*/}
Nonostante l'esempio abbia poca utilità pratica, spero sia chiaro l'approccio, attraverso
il quale è possibile creare dichiarazioni e/o regole specificatamente indirizzate alle diverse
versioni di IE. Si tratta di un set di 4 soluzioni che comprendono selettori, commenti e dichiarazioni e
che potranno essere un buon punto di partenza per i vostri workaround e hack.
Approfondimenti e conclusioni
Termina qui l'articolo dedicato ad hack, filtri e workaround, in cui abbiamo visto diverse
soluzioni pratiche per creare dichiarazioni e/o regole specifiche per le varie versioni
di Internet Explorer. Vorrei ribadire che il fatto che esistano soluzioni di
questo tipo non implica che si debbano adottare, ma senza dubbio conoscerle è importante
per poterne disporre all'occorrenza. Una raccomandazione: qualora utilizzerete le
soluzioni qui presentate, è indispensabile aggiungere un commento nei vostri fogli
di stile così da individuarle facilmente anche in seguito.
In conclusione, ecco alcuni approfondimenti. I seguenti link sono tabelle di compatibilità
di selettori e proprietà CSS nei diversi browser:
- CSS Hacks
- Web browser CSS support
- Comparison of layout engines
- CSS filters
- Hacks - CSS-discuss
- Chart of Support for CSS Filters/Hacks
Qui di seguito vengono riportati articoli, risorse e hack specifiche per Internet Explorer 7:
Questo è tutto per ora... alla prossima!
