Les CSS et les commentaires conditionnels, ou l'art d'user de ces derniers avec une certaine modération
Par Victor Brito, le vendredi 11 avril 2008, à 21h49 - Catégorie CSS - Lien permanent
Le site Les intégristes a récemment publié un billet intitulé Cibler Internet Explorer dans une CSS ? Oui, et sans hack.
Un tel intitulé montre de bonnes intentions en matière de bonne pratique de codage CSS dans le cadre de la prise en compte des lacunes d'Internet Explorer.
Toutefois, il est regrettable que la méthode privilégiée ne soit pas celle de l'ajout de feuilles de style ciblant Internet Explorer ou l'une de ses versions. En effet, le billet préconise d'écrire dans le code HTML des balises div entourées de commentaires conditionnels et comportant un attribut id dont la valeur permet de cibler telle ou telle version d'IE, IE toutes versions confondues ou les autres navigateurs. Autrement dit, on aurait un code HTML ressemblant, par exemple, à cela (code inspiré de celui proposé par le billet) :
<body> <!--[if IE 6]><div id="IE6"><![endif]--> <!--[if IE 7]><div id="IE7"><![endif]--> <!--[if gte IE 8]><div id="IE8"><![endif]--> <!--[if !IE]><--><div id="NOTIE"><!--><![endif]--> <!-- Contenu de la page --> </div> </body>
Ce qui aurait comme avantage apparent de n'utiliser qu'une seule feuille de style contenant des règles comme celles-ci (code inspiré de celui proposé par le billet) :
.mon_element {
margin-left: 2px;
}
#IE8 .mon_element {
margin-left: 3px;
}
#IE6 .mon_element {
margin-left: 4px;
}
#IE7 .mon_element {
margin-left: 5px;
}
#NOTIE .mon_element {
margin-left: 6px;
}
Or, on retombe dans l'inconvénient de la méthode des hacks CSS (soit dit en passant, j'estime que le sélecteur d'élément enfant, quoi qu'en dise le billet des Intégristes, n'en est pas un), qui consiste à « polluer » une feuille de style qui, avant tout, ne devrait contenir que les règles CSS idéales pour le style que l'on cherche à appliquer et appliquées sans broncher par les navigateurs respectueux des standards. Comme le dit si bien Vincent Voyer dans son commentaire : ça alourdit inutilement les CSS des autres navigateurs pour rien. Et eux ils ont rien demandé !
. En outre, ça alourdit le code HTML.
Bref, il vaut mieux utiliser les commentaires conditionnels pour appeler des feuilles de style supplémentaires ou pour afficher (ou masquer) du contenu ciblant ou excluant IE (ou telle ou telle version d'IE).


Commentaires
Bonjour,
Je comprends tout à fait votre point de vue, et je n'ai peut-être pas été assez clair quant à l'utilisation de cette technique : il ne s'agit pas de la solution parfaite, elle n'existe pas.
L'utilisation d'une CSS séparée (qui est également évoquée dans l'article) n'est aucunement remise en cause : elle est au contraire tout à fait indiquée dans certains cas.
Je pense que cette solution atteint ses limites dans le cadre de la maintenance d'un site relativement tentaculaire, maintenu par une équipe. La "CSS Internet Explorer" est finalement très peu utilisée, principalement pour deux raisons :
Si les CSS sont découpées en plusieurs fichiers (pour une refonte progressive du site par exemple), il peut être risqué de voir un de ses sélecteurs s'appliquer sur une page pour laquelle il n'est pas destiné.
L'utilisation d'attributs "id" pour cibler les pages réduit le risque, mais ne l'élimine pas : une propriété appliquée sur une partie du site peut en toucher une autre, car un attribut "id" existant sur une page peut être dupliqué par mégarde sur une autre.
Ensuite, lorsque plusieurs personnes travaillent régulièrement sur les mêmes fichiers, il peut être difficile de comprendre que le bug qu'on essaye de résoudre depuis un moment est causé par une propriété définie par quelqu'un d'autre dans le "fichier Internet Explorer".
Dans ce cadre, c'est cette solution, bien qu'inélégante, qui me paraît la plus sécurisée, tout en conservant une relative qualité : le code HTML reste conforme à la recommandation HTML.
Vous dites : « En outre, ça alourdit le code HTML. »
Le HTML est autant alourdi qu'avec la définition d'une CSS additionnelle.
N'oublions pas non plus que la structure HTML d'un site se voulant "compatible IE6" est déjà largement plombée : les classes "first", "last", "odd" et "even" sont par exemple couramment utilisées pour pallier à l'absence de sélecteurs CSS 2.1, et la simple absence du sélecteur de classes multiples pénalise énormément l'architecture HTML/CSS.
Vous concluez ainsi : « Bref, il vaut mieux utiliser les commentaires conditionnels pour appeler des feuilles de style supplémentaires ou pour afficher (ou masquer) du contenu ciblant ou excluant IE (ou telle ou telle version d'IE). »
Dans quel but ? Nous sommes contraints à cibler certains navigateurs dans nos CSS, pour des raisons de compatibilité.
Mais pourquoi servir un contenu différent selon le navigateur ?
Merci pour ces précisions.
Pour le cas du site , il n'est pas exclu que la maintenance soit aussi rendue plus difficile par l'organisation des feuilles de style : il n'est pas rare, en effet, de tomber sur des sites possédant plusieurs feuilles de style « principales », dont une sert à l'ensemble du site, les autres n'étant employées que pour telle ou telle rubrique du site. Mais, c'est un autre débat, qui concerne plus la manière dont le site a été conçu.
Pour les contraintes, c'est clair que nous ne pouvons pas y échapper. Mais, j'estime que c'est dommage d'utiliser des commentaires conditionnels uniquement pour des balises HTML. C'est pourquoi j'ai parlé de contenu, même si l'utilité de servir du contenu différent selon les navigateurs est très limitée, voire nulle (mis à part pour embêter gentiment les utilisateurs des anciennes versions d'IE en les invitant à se mettre à jour ou à découvrir les navigateurs respectueux des standards, je n'en vois pas l'intérêt, personnellement ; et encore, lorsqu'il s'agit d'un site professionnel, qu'il soit grand public ou non, on ne peut pas se le permettre).