Internet Explorer commenti condizionali
24/05/2011Il 'difficile' cammino evolutivo di Internet Explorer pone spesso problematiche di compatibilità nell'interpretazione delle direttive CSS impiegate dai web designer.
Ad oggi, pur se Microsoft sembrerebbe intenzionata ad allinearsi allo standard CSS3, con notevoli passi avanti come prova la versione 9 di IE e lascia sperare la beta di IE 10, rimangono ancora molto diffuse versioni di IE precedenti, in parte 'necessarie' alla sopravvivenza di sistemi aziendali implementati ad hoc e difficilmente -nonché costosamente- aggiornabili, e, non ultimo, legate alla non aggiornabilità oltre la versione 8 per chi mantiene il sistema operativo Windows XP. La scelta di Microsoft è dettata dalla necessità di 'spingere' il mercato all'aggiornamento a Seven, ma produce una conseguenza di non trascurabile rallentamento rispetto all'affermarsi dei nuovi standard CSS3 e Html5...
Non ci resta che continuare a metter 'pezze' per ovviare ai problemi di compatiblità più diffusi!
Sicuramente il metodo più diffuso ed efficare è quello dei commenti condizionali.
Inseriti nei tag di commento vengono ignorati da tutti i browser e interpretati solo da IE permettendoci quindi di sovrascrivere o inserire regole che correggano le imperfette o assenti interpretazioni dello stesso browser.
La sintassi è molto semplice
inserendo queste righe dopo il link allo stile principale solo IE andrà a leggere il CSS specifico apportando le modifiche desiderate.
Gli operatori supportati sono i seguenti
sintassi operatore descrzione
! L'operatore "not"
lt L'operatore minore di "less than"
lte L'operatore monore di o uguale "less than or equal to"
gt L'operatore maggiore di "greater than"
gte L'operatore maggiore di o uguale "greater than or equal to"
quindi ad esempio con il commento
il CSS verrà incluso solo se IE è versione 6 o superiore.
Un'altra tecnica usata prevede la scrittura di regole specifiche interne al CSS con sintassi particolari per IE:
#wrapper {
background: green; /* standard */
background: orange\9; /* IE 8 e minori */
*background: purple; /* IE 7 e minori */
_background: yellow; /* IE 6 */
}
Una terza opzione prevede di associare specifiche classi ad esempio al tag html in modo d aottenere la definizione dello stesso sulla base della versione di IE detectata: