Css condizionali con html comment e css conditional
11 marzo 2011 
Oggi parliamo di come usare i css conditional comments nel migliore dei modi. Ma cosa sono?
Nativi per html sono dei semplici commenti ma per Internet Explorer rappresentano delle particolari condizioni che ci permettono di realizzare applicazioni molto particolari che si attivano solo alla presenza di un determinato browser di casa Microsoft.
Ebbene si, questi semplici codici ci permettono di creare delle vere e proprie condizioni funzionanti a secondo del browser.
La sintassi per utilizzare questi commenti è la seguente:
1 | <!--[ If IE 8]> qua il contenuto condizionale <![endif]--> |
Avrete notato due cose: il comando If , IE e il numero 8. Cosa vogliono dire? Semplice: ci dicono che solo il browser Internet Explorer 8 può visualizzare il contenuto nel commento condizionale.
Se omettessimo il numeretto tale commento funzionerebbe su tutte le versioni di IE. Ma se invece volessimo far funzionare questo codice per tutte le versioni che vanno da x in su potremmo scrivere tale codice:
1 | <!--[ If IE gt 8]> lo vedi solo su ie7 in sù <![endif]--> |
Ovviamente possiamo giocare con questi parametri attraverso questi comandi:
- lt seleziona i browser di versione inferiore a quello che gli dici tu
- lte seleziona quelle versioni uguali o minori
- eq seleziona quelle versioni uguali
- gte seleziona quelle versioni uguali o maggiori
- gt seleziona quelle versioni maggiori
Se volessimo provare qua questa semplice paginetta di esempio, che ho realizzato per vedere la potenza di tali codici, ovviamente potremmo utilizzare questi css conditional anche per segnalare all’utente che utilizza una versione troppo vecchia del browser ( solitamente vogliamo dirlo a chi usa ie6 ).
Nei css esistono invece i css conditional analoghi come i precedenti in quanto fanno la stessa cosa ma funzionano pure sugli altri browser.
Per utilizzarli dobbiamo scrivere la seguente sintassi:
1 2 3 4 5 6 7 | .rocco { margin: 10px auto; [if IE 7] margin: 20px auto; } |
La proprietà margin verrà vista solo su ie7 e di 20px auto, mentre sugli altri browser sarà di 10px auto.
Ovviamente qua la lista della nomenclatura per selezionare il browser:
- Gecko per Firefox;
- Webkit per Safari;
- IEMac per Internet Explorer su Mac;
- Opera per Opera;
Valgono pure le stesse regole per selezionare i browser uguali , inferiori o maggiori:
1 2 3 4 5 6 7 | .rocco { padding: 10px; [if eq IE 8] padding: 12px; } |
Ultima chicca: potremmo attraverso questi css condizionali, applicare pure la condizione di una regola css dicendo se fosse diverso i browser da quello che si userebbe:
1 2 3 4 5 | .rocco { [if ! IE 6 ] margin: 20px; } |
In questo caso se la versione fosse differente ie6 il margine sarebbe di 20px.
Queste css conditional sono ottimi per colmare i difetti che ogni browser importa da versione a versione e da browser a un altro.
Avete qualche dubbio? Volete dire la vostra? Vi è piaciuto l’articolo ? Commentate e condividete 
Potresti trovare interessante anche
, controlla la prossima volta la fonte 
Ciao Rocco,
come sempre grazie di queste condivisioni, non sapevo potessimo usare i commenti anche all’interno del CSS.
Attenzione però che il codice
<!–[ If IE gt 8]> lo vedi solo su ie7 in giù <![endif]–>
non è corretto, infatti sarebbe “lo vedi solo su ie9 in su”, altrimenti avresti dovuto mettere “lt”
Ciao ciao