Des navigateurs internet, le seul qui pose problème est Internet Explorer 6, 7 et même 8 !

La première solution, à l’ancienne, est d’utiliser des hacks CSS. Ces derniers n’étant pas très fiables, il sont déconseillés. De plus, on ne sais pas comment les futurs navigateurs vont interpréter ces hacks. La deuxième solution, conseillée par Microsoft, est d’utiliser les commentaires conditionnels.

Cependant l’utilisation des commentaires conditionnels à quelques inconvénients, nous allons voir les avantages de la technique des classes conditionnelles.

Le problème des commentaires conditionnels

Ils se présentent comme des instructions dotées d’une condition (if) et qui peuvent se placer à n’importe quel endroit du document HTML.

<!-- [if IE]> <![endif]-->

Ces commentaires sont propres à Internet Explorer. Ils permettent d’inclure dans une page HTML une portion de code qui ne sera lue et interprétée que par Internet Explorer.

Attention cependant, IE10 ne reconnaît plus les commentaires conditionnels

Nous allons nous servir de ce mécanisme pour faire un lien vers une feuille de style dédiée à IE. Cette seconde feuille CSS, chargée à la suite du fichier de styles principal, aura pour but d’écraser et de rectifier au cas par cas les règles générales mal reconnues par IE.

Dans la pratique, une feuille de style corrective pour IE ne suffira pas. Vous serez souvent amenés à produire une feuille CSS spécifique à IE6 et 7, ainsi qu’une autre pour IE8. Ou pire : une feuille différente pour chacune des trois versions !

Au final, vous jonglerez avec au minimum trois feuilles de styles CSS !

Non seulement, nous avons à gérer plusieurs fichiers différents, mais nous ne pourrions toujours pas cibler les plusieurs versions à la fois sans ajouter une nouvelle condition et feuille CSS supplémentaire.

Les classes conditionnelles, une alternative ?

Une solution à été de créer un nom de classe spécifique à l’élément , via un commentaire conditionnel et sans nécessiter d’appel vers une feuille de styles. Je préfère néanmoins l’appliquer directement à l’élément , plus logique et plus souple à manipuler.

Voici une version optimisée de classe conditionnelle :

<!-- [if lte IE 7]> <![endif]-->
<!-- [if IE 8]> <![endif]-->
<!-- [if gt IE 8]> <![endif]-->

Le principe et les explications sont simples :

  • sur les versions inférieures ou égales à Internet Explorer 7, le corps du document s’écrira <!-- [if lte IE 7]> <![endif]-->
  • sur IE8, ce sera <!-- [if IE 8]> <![endif]-->
  • sur tous les autres navigateurs (IE9+ et le reste du monde), il s’agira simplement de <!-- [if gt IE 8]> <![endif]-->

Il devient alors aisé d’appliquer une règle spécifique à IE6 et IE7 :

#test{ display: inline-block; } /* Pour tout le monde */
.ie7 #test{ display: inline; zoom: 1; }/* Pour IE6 et IE7 */

Et pour appliquer des styles à la fois sur IE6, IE7 et IE8 :

#test{ font-size: 1.2rem; }/* Pour tout le monde */ 
.oldie #test{ font-size: 20px; } /* Pour IE6, IE7 et IE8 */

Bien qu’il faille rajouter du code HTML, cette métode commence à être adopté par les développeurs web. Ses avantages :

  • Elle est parfaitement valide W3C / HTML et reconnue par tous les navigateurs
  • On cible les versions d’Internet Explorer souhaitées avec .ie7, .ie8, .oldie par exemple,
  • Pas de multiplication des requêtes, et des fichiers externes à vérifier et maintenir

Que pensez-vous de cette technique ? L’utilisez-vous ?