domenica 14 ottobre 2012

Come includere CSS condizionali per IE


Affinché il nostro sito venga visualizzato correttamente anche su Internet Explorer, è necessario inserire due brevi ma fondamentali righe condizionali al nostro foglio HTML.

La procedura, semplice ed intuitiva, da adottare è la seguente:

  
<!--[if IE]>  
   <link rel="stylesheet" type="text/css" href="stile-ie.css" />  
<![endif]-->  

Lo script dell'esempio precedente si occuperò di caricare il foglio "stile-ie.css" ogni volta che il browser che visualizza il nostro sito è una qualsiasi versione di IE. In realtà, aggiungendo alcuni suffissi alla causale if, possiamo rendere più preciso ed efficace il nostro script e renderlo capace di selezionare le singole versioni del browser di casa Microsoft; vediamo come.

Selezionare versioni specifiche

  • Per selezionare una versione minore di quella indicata utilizziamo l'espressione lt. Ad esempio la seguente procedura condizionale attribuirà il foglio di stile solo alle versioni di IE precedenti alla 9.
 
<!--[if lt IE 9]>   
   <link rel="stylesheet" type="text/css" href="stile-ie.css" />   
<![endif]-->
  • Per selezionare una versione minore o uguale a quella indicata usiamo il suffisso lte. Ad esempio proviamo a selezionare unicamente le versioni precedenti la 8, compresa la 8.
 
<!--[if lte IE 8]>   
   <link rel="stylesheet" type="text/css" href="stile-ie.css" />   
<![endif]-->
  • Per selezionare una versione maggiore di quella indicata usiamo il suffisso gt. Ad esempio le seguenti righe di codice selezioneranno unicamente le versioni successive alla 7.
 
<!--[if gt IE 7]>   
   <link rel="stylesheet" type="text/css" href="stile-ie.css" />   
<![endif]-->   
  • In quest'ultimo caso vediamo come selezionare una versione maggiore o uguale a quella indicata, attraverso il suffisso gte. Ad esempio:
<!--[if gte IE 7]>   
   <link rel="stylesheet" type="text/css" href="stile-ie.css" />   
<![endif]-->

E tu quale soluzione adotti per rendere il tuo sito compatibile con Internet Explorer? Commenta il mio articolo, condividilo ed esprimi la tua opinione!

0 commenti:

Posta un commento