HTML & CSS

Commentaires conditionnels d’IE vs hacks CSS ?

Les différences de rendu entre les différents navigateurs sont le lot quotidien de l’intégrateur CSS : un léger décalage par ci, une largeur différente par là… et la tentation est grande d’envoyer paitre le dernier de la classe, au grand dam de la voix de la sagesse (souvent commerciale) qui vous prie de ne pas négliger 85% de ses clients potentiels…

Comme vous n’avez pas le temps de revoir la structure de votre code XHTML, vous songez aux fameux hacks CSS dont on vous rebat les oreilles. Comme beaucoup, j’ai longtemps utilisé les box model et autre underscore hacks pour finir avec des feuilles de styles qui n’en n’ont plus (de style) ! J’ai donc cherché à m’en passer. Mais par quoi les remplacer ?

Le constat

Tous les navigateurs ont des faiblesses concernant le support des normes CSS, mais celui qui a la palme est sans conteste Internet Explorer. C’est pourquoi je me suis lancé dans la recherche du hack ultime pour filtrer ce piètre navigateur. Je me suis rapidement rendu compte que de plus en plus de sites encouragent, non sans quelques réserves judicieuses, l’utilisation des commentaires conditionnels pour IE.

La solution

Les commentaires conditionnels encadrant l’appel de la feuille de style ne sont compris que par IE, toute version confondue dans l’exemple ci-dessous, ou bien en précisant la version, voire la sous-version que l’on veut filtrer. Voyez le site MSDN de Microsoft pour plus de détails.

La syntaxe pour cibler toutes les versions d’IE

<!--[if IE]>
     <style type="text/css">
         @import "/style/pour_ie.css";
     </style>
<![endif]-->

Pour cibler une version spécifique

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

<!--[if IE 5.5000]>
     pour IE 5.5
<![endif]-->

<!--[if IE 6]>
     pour IE 6.0
<![endif]-->

Pour cibler une version supérieure ou égale à

<!--[if gte IE 5]>
     pour réserver le contenu à IE 5.0, IE5.5
     et IE6.0
<![endif]-->

<!--[if gte IE 5.5000]>
     pour IE5.5
     et IE6.0
<![endif]-->

Pour cibler une version inférieure ou égale à

<!--[if lte IE 6]>
     pour IE5.0, IE5.5
     et IE6.0
     mais pas IE7.0
<![endif]-->

Pour cibler une version inférieure à

<!--[if lt IE 6]>
     pour IE5.0
     et IE5.5
<![endif]-->

Les navigateurs autres que IE considèrent ces lignes comme des commentaires HTML. Internet Explorer est programmé pour les prendre en compte. C’est aussi simple que ça 😉

Pour masquer du code à toutes les versions d’IE Windows

La nouveauté dans les exemples qui suivent, c’est l’ajout de commentaires HTML qui permet de filtrer un peu plus subtilement les navigateurs. Dans cet exemple, seul IE Windows n’interprètera pas le code ou l’appel à une feuille de style.

<!--[if !IE]> <!-->
     IE Windows ne lira pas ça
<!--> <![endif]-->

compliquons un peu les choses

L’exemple qui suit permet dans un premier temps de cibler tous les navigateurs plus IE7, et dans un second temps de s’adresser uniquement aux versions inférieures ou égales à IE6 Windows.

 <!--[if IE 7]> <!-->
     Pour IE7
     mais aussi Safari, Firefox, Opera, etc.,
     mais ni IE5.x ni IE6.0 Windows
<!--> <![endif]-->

<!--[if lte IE 6]>
     pour IE5.x
     et 6.0 Windows
<![endif]-->

La méthode de travail

Dans un monde idéal, cette feuille de style pour_ie.css serai vide. Nous allons donc essayer d’en mettre le moins possible. Pour cela, nous allons travailler sur la feuille de style « standard », que nous testerons sous Firefox, Opera sur PC et les mêmes sur MacOS X en ajoutant Safari et Camino (pour la forme, puisque le moteur est le même que Firefox. Mais sait-on jamais !).

Une fois ces navigateurs satisfaits, nous nous tournerons vers Internet Explorer pour fixer les problèmes de rendu en surclassant les déclarations fautives (et uniquement celles-ci) pour profiter du C de CSS (la cascade) ! Le plus souvent, il s’agit des attributs width, padding, margin, position ou de différence de rendu des formulaires ou des tableaux.

Conclusion

Deux feuilles de style peuvent sembler ajouter plus de confusion encore. Certains préfèreront sans doute utiliser les contournements. Mais les navigateurs évoluent, et les hacks qui fonctionnent aujourd’hui, pourraient poser des problèmes plus tard. Je vous laisse avec un peu de lecture. N’hésitez pas à laissez vos commentaires (inconditionnels ?)

Linkographie. Quelques liens sur les hacks CSS et les commentaires IE

le site MSDN de Microsoft
A tout seigneur, tout honneur 😉
http://www.blog-and-blues.org/articles/…
Un article exhaustif au sujet des commentaires conditionnels dont j’ai repris les échantillons de code, mais pas les explications : je vous en recommande fortement la lecture !
http://darkmag.net/darkBlog/…
Pourquoi et comment on peut se passer des hacks CSS
http://www.dyingculture.net/…
Quelques réserves vis-à-vis des commentaires conditionnels
http://forum.alsacreations.com/faq/
Liste des commentaires conditionnels spécifiques cités en exemple.
http://www.tantek.com/CSS/Examples/boxmodelhack.html
L’inventeur du box model hack
http://css-discuss.incutio.com/?page=CssHack
La plupart des hacks CSS disponibles sur une page
http://centricle.com/ref/css/filters/
Quels filtres pour quels navigateurs et plateformes ? C’est ici que ça se passe !
Publié le par Bruno Bichet