Les hacks css, pour que votre site passe sur tous les navigateurs (même internet explorer)
Si vous êtes tout comme moi Webmaster, vous avez déja dû dans des projets un tant soi peu complêxes graphiquement, vous arracher les cheveux à cause des problèmes de disposition.
En effet, qui n'a jamais effectué une intégration XHTML parfaite sous firefox et opéra, et s'est aperçu(e) ensuite que le rendu est affreux sous internet explorer?
Pour palier à ces problèmes, nous pouvons utiliser les "hacks css", qui vous permettront d'écrire des règles spécifiques pour un navigateur, et parfois même, pour une version de ce navigateur.
On va supposer que nous souhaitons travailler avec cet élément: <div id="ethtezahl"></div>
Traditionnellement, on écrira:
#ethtezahl{
/* Règles css ici */
}
Cette règle sera lue par tous les navigateurs.
Voici comment faire une règle CSS qui ne sera interprétée que par internet explorer 6:
* html #ethtezahl{
/* Règles css spécifiques à internet explorer 6 ici */
}
Voici comment faire une règle CSS qui ne sera interprétée que par internet explorer 7:
*+html #ethtezahl{
/* Règles css spécifiques à internet explorer 7 ici */
}
Voici comment faire une règle CSS qui ne sera interprétée que par Mozilla Firefox:
html:not([lang*=""]) #ethtezahl{
/* Règles css spécifiques à Mozilla Firefox ici */
}
Voici comment faire une règle CSS qui ne sera interprétée que par Mozilla Firefox 2:
#ethtezahl, x:-moz-any-link{
/* Règles css spécifiques à Mozilla Firefox 2 ici */
}
Voici comment faire une règle CSS qui ne sera interprétée que par Mozilla Firefox 3:
html>/**/body #ethtezahl, x:-moz-any-link, x:default{
/* Règles css spécifiques à Mozilla Firefox ici */
}
Voici comment faire une règle CSS qui ne sera interprétée que par Safari 3:
html[xmlns*=""] body:last-child #ethtezahl{
/* Règles css spécifiques à Safari 3 ici */
}
Voici comment faire une règle CSS qui ne sera interprétée que par Opera 9:
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
#ethtezahl {
/* Règles css spécifiques à Opéra 9 ici */
}
}
Voici comment faire une règle CSS qui ne sera interprétée que par Konqueror 3.4.3 et supérieurs:
html:not(:nth-child(1)) #ethtezahl {
/* Règles css spécifiques à
}
Voici comment faire une règle css qui en sera interprétée que par chrome:
/*\*/
html*##ethtezahl {
/* Vos règles CSS spécifiques à Google chrome. Mais évitez les crochets, vous auriez de droles de surprises. */
}/*end*/
.dummyend[id]{clear:both;}