Espressioni condizionali dei CSS

Quale programmatore non odia Internet Explorer 6 (quando non l’intera produzione di browser di casa Microsoft)? I layout che su altri browser funzionano correttamente vedendoli con questo browser vecchio risultano disallineati e per questo motivo è necessario inserire delle istruzioni apposite solo per lui che magari riscrivano anche in parte quelle settate per altri browser.
Ecco quindi un compendio di tecniche per poter fare assegnazioni css “ad hoc” per i vari browser e le varie versioni.

Ecco come selezionare i fogli di stile css a seconda del browser in uso:

// Css applicato solo per il browser Internet Explorer, qualsiasi versione
 <!--[if IE]>
 <link rel="stylesheet" type="text/css" href="ie-only.css" />
 <![endif]-->
 
 // Css applicato a tutti i browser che NON sono Internet Explorer
 <!--[if !IE]>
 <link rel="stylesheet" type="text/css" href="not-ie.css" />
 <![endif]-->
 
 // Css applicato solo ad Internet Explorer versione 7
 // Cambiando il numero dopo "IE" si può cambiare la versione del browser
 <!--[if IE 7]>
 <link href="IE-7-SPECIFIC.css" rel="stylesheet" type="text/css">
 <![endif]-->
 
 // Css applicato a tutte le versioni di Internet Explorer minori a 7 (ovvero 6 e inferiori)
 <!--[if lt IE 7]>
 <link rel="stylesheet" type="text/css" href="IE-6-OR-LOWER-SPECIFIC.css" />
 <![endif]-->

Oltre alla stringa “lt” utilizzata per definire il concetto di “less than” ( inferiore a ) all’interno dell’istruzione if ne esistono altre che sono:

• gt: greater than (maggiore di)
• gte: greater than or equal to (maggiore di o uguale a)
• lte: lessa than or equal to (inferiore di o uguale a)

Queste istruzioni possono contenere anche dei frammenti di codice html che saranno eventualmente visualizzati solo sui browser selezionati (utile per inviare qualche insulto a chi ha ancora Internet Explore 5.5)

E’ possibile, nel caso non si volesse realizzare un foglio di stile dedicato, inserire istruzioni selettive all’interno della definizione di stile:

// Per IE-7 aggiungere un * (asterisco)
#div {
 *height: 300px;
}
 // Per i browser inferiori a IE-7 aggiungere un _ (underscore)
#div {
 _height: 300px;
}
 // nasconde le istruzioni ai browser IE-6 e inferiori
#div {
 height/**/: 300px;
}