I commenti condizionali nei CSS

L'argomento è piuttosto articolato, lo scopo è quello, attraverso un commento condizionale, di realizzare layout praticamente identici su tutti i principali browser.

Il problema è legato soprattutto al comportamento delle versioni dei browser di casa Microsoft, che tendono non solo a non seguire gli standard, ma a crearne di propri addirittura da una versione all'altra.



Mi è capitato recentemente di fare un sito ottimizzato anche per IE5 ed ho praticamente rinunciato all'utilizzo dei CSS se non per i selettori principali, tornando al vecchio modo di costruire layout, attraverso l'uso delle tabelle.

Considerando invece IE6 come ancora mediamente utilizzato da molti client, i commenti condizionali li utilizzo per dare istruzioni specifiche sia a quella versione che a quella successiva, IE7 (nonostante i proclami di adesione agli standard ho avuto bisogno di passare istruzioni specifiche al browser in più di una occasione!).

Inutile dire che quando invece si controlla il layout su Firefox, Opera, Netscape/Flock, Safari, si è abbastanza sicuri di ottenere lo stesso risultato semplicemente seguendo le regole dettate dal W3C.

Il commento condizionale che utilizzo normalmente per passare istruzioni a Internet Explorer 6 e versioni precedenti per Win e Mac è:

*html nomeSelettore{
istruzioni
}


Attraverso questa dichiarazione solo i suddetti browser applicheranno le regole css

se per esempio andiamo a scrivere:


#boxNews{
margin: 10px 20px 0 0;
}

*html boxNews{
margin-bottom:10px;
}


solo IE6 e precedenti applicherà un ulteriore margine inferiore di 10 px, mantenedo comunque tutte le altre istruzioni sui margini dichiarate per i browser "normali" :)

Per quanto riguarda IE 7, l'istruzione condizionale che conosco è:


*:first-child+html nomeSelettore


Vedremo cosa succederà con la voersione 8 di explorer!

Il prezzo da pagare per fare siti che si vedano correttamente su tutti i browser è quello di non poter realizzare codice CSS validabile e forzare i browser a "lavorare in quircks mode"