Guida all’utilizzo dei commenti condizionali

Guida all’utilizzo dei commenti condizionali

2006
5
CONDIVIDI

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:

1
<!-- [if ESPRESSIONE]> DICHIARAZIONE <![endif]-->

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:

1
<!-- [if IE]> DICHIARAZIONE  <![endif]-->

Verifica se il browser che stiamo utilizzando è Internet Explorer (qualsiasi versione).

1
<!-- [if IE 5]> DICHIARAZIONE  <![endif]-->

Verifica se il browser che stiamo utilizzando è Internet Explorer vers. 5.

1
<!-- [if IE 6]> DICHIARAZIONE  <![endif]-->

Verifica se il browser che stiamo utilizzando è Internet Explorer vers. 6.

1
<!-- [if IE 7]> DICHIARAZIONE  <![endif]-->

Verifica se il browser che stiamo utilizzando è Internet Explorer vers. 7.

1
<!-- [if IE 8]> DICHIARAZIONE  <![endif]-->

Verifica se il browser che stiamo utilizzando è Internet Explorer vers. 8.

1
<!-- [if IE 9]> DICHIARAZIONE  <![endif]-->

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:

1
<!-- [if gt IE 6]> DICHIARAZIONE  <![endif]-->

L’operatore gt (greater than) verifica che la versione del browser sia superiore alle versione 6 (ad esempio), se è vero esegue la dichiarazione.

1
<!-- [if gte IE 6]> DICHIARAZIONE  <![endif]-->

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.

1
<!-- [if lt IE 7]> DICHIARAZIONE  <![endif]-->

L’operatore lt (less than) verifica che la versione del browser siainferiore alle versione 7 (ad esempio), se è vero esegue la dichiarazione.

1
<!-- [if lte IE 7]> DICHIARAZIONE  <![endif]-->

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.

1
<!-- [if !IE 7]> DICHIARAZIONE  <![endif]-->

L’operatore ! (not) verifica che la versione del browser siadiversa in questo caso da tutti gli explorer, se è vero esegue la dichiarazione.

1
<!-- [if (gt IE 5)&(lt IE 7)]> DICHIARAZIONE  <![endif]-->

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.

1
<!-- [if (IE 5)|(IE 7)]> DICHIARAZIONE  <![endif]-->

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:

1
2
3
4
5
6
7
8
9
 
       <!-- [if lte IE 7]>
 
<style>
                 #main{ margin-top:0px; float:left; }
                 #main .header{ height:100px; }
             </style>
 
       <![endif]-->

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:

1
2
3
4
 
       <!-- [if lte IE 7]>
             	<link rel="stylesheet" type="text/css" href="style_ie7.css" />
       <![endif]-->

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:

1
2
3
4
5
<!-- [if lte IE 7]>
     <script type="text/javascript">
          alert("Stai usando una versione di explorer obsoleta! Aggiornalo al più presto");
     </script>
 <![endif]-->
  • A. Drago

    Grazie!

  • Inspiration

    bell’articolo, molto completo. ad esempio pensavo si potessero inserire solo css ed invece c’è la possibilità di inserire javascript. ottimo

  • pask82

    fatemi capire ma anche la versione 9.0 supporterà i commenti condizionali? Se ciò è vero avvalora la mia tesi: ie non è ancora un browser accessibile.

    • Daniela Giacchetti

      non vorrei dire una cavolata ma mi sa tanto di no

  • Att. Ferrante

    mi hanno spesso salvato da figuracce :)