Per limitare le falle di renderizzazione del contenuto Internet Explorer ha introdotto i commenti condizionali, essi sono dei veri e propri filtri o agganci per modificare delle proprietà nei fogli di stile solo con una determinata versione di Internet Explorer. Questo metodo “dovrebbe” porre rimedio agli innumerevoli problemi di compatibilità tra IE ed il resto del mondo.
Sintassi commenti condizionali
Per correttezza, in teoria, si collocano nei tag <head> ma in pratica funzionano un pò dappertutto. Di solito per convenzione vanno applicati subito dopo la dichiarazione del css madre.
Un esempio di sintassi è la seguente:
dove in espressione anteponiamo la versione di Internet Explorer per la quale vogliamo alterare il risultato, mentre in dichiarazione ciò che vogliamo eseguire (un foglio di stile, un’istruzione, ecc…), nel dettaglio:
Verifica se il browser che stiamo utilizzando è Internet Explorer (qualsiasi versione).
Verifica se il browser che stiamo utilizzando è Internet Explorer vers. 5.
Verifica se il browser che stiamo utilizzando è Internet Explorer vers. 6.
Verifica se il browser che stiamo utilizzando è Internet Explorer vers. 7.
Verifica se il browser che stiamo utilizzando è Internet Explorer vers. 8.
Verifica se il browser che stiamo utilizzando è Internet Explorer vers. 9.
Operatori
Oltre all’operatore di uguaglianza precedentemente illustrato (if IE), sono a disposizione dei webmasters altri operatori, eccoli nel dettaglio:
L’operatore gt (greater than) verifica che la versione del browser sia superiore alle versione 6 (ad esempio), se è vero esegue la dichiarazione.
L’operatore gte (greater than or equal) verifica che la versione del browser siasuperiore o uguale alle versione 6 (ad esempio), se è vero esegue la dichiarazione.
L’operatore lt (less than) verifica che la versione del browser siainferiore alle versione 7 (ad esempio), se è vero esegue la dichiarazione.
L’operatore lte (less than or equal) verifica che la versione del browser siainferiore o uguale alle versione 7 (ad esempio), se è vero esegue la dichiarazione.
L’operatore ! (not) verifica che la versione del browser siadiversa in questo caso da tutti gli explorer, se è vero esegue la dichiarazione.
L’operatore & (and) verifica che la versione del browser siamaggiore alla versione 5 e inferiore alla versione 7. Se è vera questa condizione esegue la dichiarazione.
L’operatore | (or) verifica che la versione del browser sia la 5 oppure la 7. Se è vera questa condizione esegue la dichiarazione.
Esempi di commenti condizionali
Vi mostrerò un esempio concreto di utilizzo di commenti condizionali. Supponiamo il caso che ho realizzato una pagina web perfettamente compatibile con tutti i browser in circolazione meno che la versione 6 e 7 di Internet Explorer dove ho bisogno di sistemare dei margini di un div, il risultato sarebbe il seguente:
Cosi facendo ho modificato il valore delle due classi #main e #main .header solo per i browser Internet Explorer 6 e 7 lasciando intatto ogni altro risultato.
Analogamente possiamo anche passare un intero foglio di stile se le classi da modificare sono parecchie:
In questo modo se il browser è una versione 6 o 7 di Internet Explorer eseguirà in cascata:
- Il foglio di stile principale;
- Se è una versione 6 o 7 di IE leggerà anche quello condizionale;
- Mette a confronto entrambi i fogli di stile;
- Quando trova 2 classi uguali in entrambi farà prevalere quella nel commento condizionale;
- Esegue il render della pagina.
Javascript nei commenti condizionali
Oltre a modificare lo stile grafico di una pagina essa può essere alterata aggiungendo script come ad esempio Javascript:
