Une classe conditionnelle pour IE 6 et 7 Limites de la technique de classe conditionnelle, et solutions

Les styles des éléments html et body ne peuvent être modifiés

La technique que je présente a quelques limites :

 Elle s'intéresse uniquement à Internet Explorer 6 et 7, et ne permet pas de viser la version 8. À ma connaissance ce n'est pas un grand problème car le support de CSS 2.1 dans IE8 est très bon.

 L'élément div qui porte la classe "ISIE67" est un enfant de body. Cela signifie que cette classe ne peut pas être utilisée pour modifier les styles des éléments html et body.

 Enfin, certains scripts JavaScript créent à la volée des éléments HTML qui sont rajoutés à la fin de l'élément body. Les styles de ces éléments générés en JavaScript ne pourront pas être modifiés via la classe "ISIE67" non plus.

L'ajout d'un code JavaScript pour éviter le problème

Ajouter dans l'élément head de la page un code JavaScript

D'expérience, les deux premiers problèmes sont rarement handicapants. En revanche le troisième problème peut l'être. Je vous propose donc une solution JavaScript, qui n'est pas parfaite, mais qui peut être utile. Il s'agit de rajouter dans l'élément head de la page le code suivant:

 <!--[if lte IE 7]> 
<script type="text/javascript">
document.documentElement.className+=' ISIE67';</script> 
<![endif]--> 

Vous pouvez utiliser cette solution en remplacement du code HTML à rajouter dans le body, mais dans ce cas la classe "ISIE67" ne sera utilisable que si JavaScript est activé ! Vous pouvez aussi garder les deux codes (celui-ci dans le head, et celui proposé dans la partie précédente dans le body).

Enfin, je précise à l'attention des développeurs JavaScript que la solution ci-dessus peut être gérée différemment, avec un ajout de classe sur l'élément body plutôt que html, peut être reproduite en jQuery ou autre, etc.