Come creare CSS condizionali solo per IE8 o altre versioni

Molte volte capita di avere la necessità di adattare un layout o sito web in generale affichè si visualizzi bene anche su IE9/8 o versioni inferiori. Vediamo come procedere e come creare questi css condizionali.

Panoramica Generale

La procedura da adottare è molto semplice, nel codice html della vostra pagina vi basterà inserire questo selettore:

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

In questo particolare caso il file css viene caricato con TUTTE le versioni di Internet Explorer.

Aggiungendo alcuni suffissi alla causale if  possiamo poi selezionare tutte le versioni che preferiamo: lt (minore), lte (minore o uguale), gt (maggiore) gte (maggiore o uguale).

Vediamo insieme alcuni esempi pratici.

Css solo per Internet Explorer 8

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

Come vedete in questo caso non ho usato nessun suffisso, pertanto il file css viene caricato SOLO quando il sito viene visitato con IE8.

Internet Explorer 8 o inferiori

<!--[if lt IE 9]>
	<link rel="stylesheet" type="text/css" href="ie8-e-inferiori.css" />
<![endif]-->

E’ la soluzione che vi consiglio per gestire meglio la visualizzazione su internet explorer 8. Se proprio non potete farne a meno potete anche aggiustare il layout per versioni ancora più arretrate di IE seguendo il prossimo punto.

Internet Explorer 7 o inferiori

Ottimizzare il sito per versioni inferiori a IE8 non ha molto senso (clicca per scoprire cosa intendo), sia in termini di tempo che in termini di denaro. Se proprio dovete farlo ecco come richiamare un css ad hoc per queste (pessime) versioni.

<!--[if lt IE 8]>
	<link rel="stylesheet" type="text/css" href="ie7-e-ie6.css" />
<![endif]-->

Le combinazioni sono tante, potete sbizzarrirvi a seconda di quello che vi serve, basta teniate bene a mente le differenze dei suffissi:

 lt (minore), lte (minore o uguale), gt (maggiore) gte (maggiore o uguale).

Personalmente mi sono sempre trovato bene usando il semplice selettore generale if IE –> ie.css (ovvero il primo esempio di questa guida). Di solito dentro questo css vado poi a settarmi tutte le classi che mi servono usando anche alcuni hacks dedicati a specifiche versioni di IE (non perdete il prossimo articolo sugli hacks!).

NOTA: questo metodo può essere usato anche per caricare in modo condizionale i file javascript!

E tu quale soluzione usi con internet explorer? Se l’articolo ti è stato utile condividilo sui tuoi social network preferiti!