Commentaires conditionnels d'IE vs hacks CSS ?

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

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 ?)

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 !

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



10 commentaires pour “Commentaires conditionnels d'IE vs hacks CSS ?”

  1. Cap° dit :

    En ce qui me concerne les "commentaires conditionnels" reste la solution la plus viable voir même la plus fiable…

    • Iguane dit :

      Et oui, c’est là qu’on se rend compte que IE, c’est quand même très mal foutu ! Quoi qu’il en soit, merci pour cet excellente synthèse. :)

  2. Gameplayeer dit :

    Un point supplémentaires intéréssant a paropos de ce commentaire conditionnel est la possibilité de filtrer par version d’IE : Fini la question "ok ca marche avec IE 6 mais quid d’IE 5.5 ? IE 5.0 ?" En poussant la possibilité a l’extrème, et après analyse de la cible du site il est possible de prévoir toutes les versions des navigateurs…

  3. br1o dit :

    D’ailleurs, ça me fait penser à les ajouter (les commentaires qui filtrent les versions et sous-version ;). Je fais ça ce soir !

  4. Cap° dit :

    On pourra bientot mettre en place le filtre pour IE7 :D !!! Au vu de la beta 3 et de l’affichage de certain site web sous cette nouvelle version. Il est fort probable que nous passions encore pas mal de temps à corriger les problème d’affichage de nos futur pages web.

    Le commentaire conditionnel à encore de beau jour devant lui.

  5. Jean dit :

    Autre adresse utile IE7, le script, qui lui aussi utilise les commentaires conditionnels.

    dean.edwards.name/IE7/

    Je ne me casse plus la tête ni avec IE ni avec des hacks.

  6. ___seb dit :

    Moi aussi, je suis passé par là, j’ai utilisé le selecteur d’enfant pour leurrer ie6 mais ie7 le comprend … C’est LA solution puisque le rendu peut-être quasi tout le temps assuré ok avec une seule css pour firefox, safari, opera, konqueror, j’en passe et des meilleurs.

  7. CH4NCE dit :

    Bravo à l’auteur. Respect pour son calme et sa verve. Personnellement j’aurais fait autant d’effort pour trouver de jolis mots que microsoft en fait pour supporter le css. Ca donnerai donc plutôt : P….. d’ie de m…..

    Et quand je developpe et que je teste ce que j’ai fait sous ie j’ai la tourette. Si microsoft nous remboursait le temps perdu à arranger nos sites pour cette saleté on serait pété de thune et microsoft serait au bord de la faillite (faut aussi demander les dommages et interets)

  8. Li-An dit :

    Ah ben tiens, je vais pouvoir corriger ce défaut d’affichage qui m’agace tant sous IE7.

  9. nesk dit :

    Merci pour les différentes syntaxes, c’est sur que tous les hacks, ça fait un peu sale.



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site