Toujours dans ma recherche de solution pour servir des déclarations CSS uniquement à Internet Explorer, je suis tombé sur une technique que j’appellerais «classification» sélective du `body` (ou de la balise `html`) en fonction du navigateur. Une fois encore, les commentaires conditionnels serviront à détecter Internet Explorer pour ajouter une classe à la balise `html` pour éviter de créer une feuille de style dédiée à IE.
<!--[if !IE]><!--><html><!-- <![endif]--> <!--[if IE]><html class="ie"><![endif]-->
Reste à utiliser ce sélecteur `.ie` dans votre feuille de style pour cibler IE toute version confondue. Rien n’empêche d’utiliser plusieurs commentaires pour cibler différentes versions, comme le suggère Yves Van Goethem (dont le code source de la page personnelle — http://yves.vg — a fourni la matière première de ce billet).
Cibler chaque version d’Internet Explorer
<!--[if !IE]><!--><html><!-- <![endif]--> <!--[if lte IE 6]><html class="ie6"><![endif]--> <!--[if IE 7]><html class="ie7"><![endif]--> <!--[if gte IE 8]><html class="ie8"><![endif]-->
Internet Explorer ne tiendra pas compte de la première ligne. Ensuite, on fait un premier tri pour mettre de côté les versions inférieures ou égales à IE6. Plus loin, on isole IE7, et pour finir on cible les versions supérieures ou égales à IE8.
Et le prochain IE9 ?
Si IE9 utilise les commentaires conditionnels de la même manière, il sera toujours temps de modifier la dernière ligne et d’en ajouter une :
<!--[if IE 8]><html class="ie8"><![endif]--> <!--[if IE 9]><html class="ie9"><![endif]-->
Exemple d’utilisation
Dans la feuille de style, on pourra utiliser (au hasard) :
#sidebar { width: 200px; }
.ie6 #sidebar { margin-left: -3px; }Mise à jour (17/02/2011)
Voici les commentaires conditionnels utilisé par le framework HTML5 Boilerplate :
<!doctype html> <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> <!--[if lt IE 7 ]> <html lang="fr" class="ie6"> <![endif]--> <!--[if IE 7 ]> <html lang="fr" class="ie7"> <![endif]--> <!--[if IE 8 ]> <html lang="fr" class="ie8"> <![endif]--> <!--[if IE 9 ]> <html lang="fr" class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html lang="fr"> <!--<![endif]-->
Bonne idée, ça reste assez propre par rapport à certaines méthodes plus « bourrines » =).
Oep ça peut être utile ! à voir maintenant parce que développer pour IE ça devient assez compliqué lol
C’est W3C compliant ?
Sympa comme astuce mais pour ma part ma balise HTML ressemble à ça :
Du coup ça devient vite lourd 🙁
Oups, la ligne a sauté : <html xmlns= »http://www.w3.org/1999/xhtml » xml:lang= »fr » lang= »fr »>
De mémoire, la balise « html » ne peut contenir ni attribut « class » ni attribut « id » pour être conforme aux recommandations, pour la balise « body » c’est correct. (je n’ai retrouvé que la doc pour HTML 4.01)
Ça fait un moment que j’utilise une <a href="http://blog.giovannetti.pro/detecter-si-javascript-est-active-avant-laffichage-de-la-page/
« >technique similaire pour vérifier si Javascript est activé et mettre en page mes éléments en fonction.
@Eric Giovannetti — Apparemment dans HTML5, ces restrictions semblent obsolète : on devrait pouvoir utiliser plein de chose dans la balise (http://dev.w3.org/html5/spec/Overview.html#global-attributes) :
accesskey
class
contenteditable
contextmenu
dir
draggable
hidden
id
lang
spellcheck
style
tabindex
title
Désolé du double post mais une erreur dans l’écriture du lien : Technique similaire pour vérifier si Javascript est activé.
Merci de cette technique bien utile 😉
Il est vrai que de maintenir des feuilles de style pour IE, par version devient un peu compliqué et surtout pénible.
L’avantage tout de même est de ne pas polluer son code css principal par des lignes supplémentaires (code et commentaires) qui rallongent notre feuille de style.
Pour ma part jusqu’a présent, je mettais en place 1 seul commentaire conditionnel pour IE et je ciblais par version mes css :
.maclasse {} // ie
*html .maclasse {} // ie6
*:first-child+html .maclasse {} // ie7
Il me parait très intéressant d’utiliser cette méthode, de part sa maintenabilité et ma foi cela ne rajoute pas autant de ligne que ça puisqu’au niveau des commentaires il n’y en a plus avec la classe .ie6, ou .ie7…
Cela permet donc de regrouper les éléments ensemble.
Il existe une variante de cette méthode qui me plait un peu plus de par la notion de priorité :
<body>
<!--[if IE 6]><div id="IE6"><![endif]-->
<!--[if IE 7]><div id="IE7"><![endif]-->
<!--[if (IE) & (!IE 6) & (!IE 7)]><div id="IE"><![endif]--> <!-- Pour les anciennes et prochaines versions d'Internet Explorer (autres que 6 et 7) -->
<!--[if !IE]>--><div id="NOTIE"><!--<![endif]--> <!-- Le commentaire est fermé, puis rouvert -->
<!-- Structure HTML de la page -->
</div> <!-- Une simple fermeture de balise à la fin, car tous les navigateurs sont ciblés. -->
</body>
La CSS :
.maclasse {}
IE .maclasse {}
IE6 .maclasse {}
IE7 .maclasse {}
NOTIE .maclasse {}
Cette portion de code vient du billet de Pierre Bertet de les integristes
Bonne journée 😉
Bonjour Bruno,
Cette solution est intéressante lorsque les surcharges ou le design sont minimalistes (http://yves.vg).
Maintenant, si tu travailles sur des pages plus élaborées qui vont demander une surcharge plus conséquente, il est certainement préférable d’avoir une css supplémentaire.
Dans ce sens, Daniel Glazman a élaboré un outil permettant d’identifier les selecteurs chargés inutilement (http://tinyurl.com/yassq64/) et donc réduire la charge de chaque fichier. Car même si les navigateurs récents sont plus rapides, les petits gains sont toujours intéressants.
Au final, les deux solutions sont envisageables en les adaptant à l’envergure du projet.
Bonjour,
merci pour ce billet et j’ajouterais celui-ci dans le même genre :
Cibler Internet Explorer dans une CSS ? Oui, et sans hack.
Bonne journée 😉
@Xavier — Mon opinion sur cette technique n’est pas encore faites mais je ne pense pas qu’elle soit réservée à des surcharges minimales. Personnellement, je ne suis pas très fan car du coup, les hacks, auparavant relégués dans une feuille de style dédiée à IE et donc « sans papier » sont pour ainsi dire « légalisés » et le risque c’est de s’en donner à coeur joie dans la CSS sans remettre en question le marquage HTML souvent fautif lorsqu’il y a des différences de rendu entre IE et les autres.
Autant les hacks pour ie relégués dans une CSS mise entre commentaires conditionnels étaient une manière de mettre la poussière sous le tapis, là on fait comme si la poussière était devenue à la mode sous prétexte qu’elle avait une jolie couleur 😉
Ceci dit, dans certains cas, je suis sûr que ça peut permettre de mettre en place une dégradation gracieuse ou une amélioration progressive, même si à la limite j’aurais plus tendance à utiliser une bibliothèque comme Modernizr s’il s’agit de détecter les fonctionnalités prises en charge par les navigateurs car du coup, on ne focalise plus uniquement sur Internet Explorer.
J’utiliste cette technique également sur des sites à très forte contrainte, internationalisé et tout le tralala et ça reste la solution la plus propre d’après moi pour 3 choses :
* C’est documenté, il ne s’agit pas d’un hack incompréhensible pour les juniors ;
* Ça évite d’avoir un même sélecteur CSS dans plusieurs fichiers, ce qui à mon sens n’est pas très maintenable ;
* On peut utiliser plusieurs sélecteurs sur une même déclaration.
@ctito17 — Oui et finalement c’est la même chose, sauf qu’ici, on cible la balise une fois pour toutes et hop ! 😉
Le danger de toutes ces techniques est en effet que l’intégrateur passe à coté d’un mauvais markup ou de mauvaise utilisation de la css.
pour ma part le seul « hack » que j’utilise est le celui du !important pour ie6 (2-3 max pas projet, surtout pour les min-height,/min-width) tout le reste (marge, positionnement..) doit pouvoir se faire sans hack.
J’ai aussi adopté les Sélecteurs conditionnels pour IE sur la balise html, qui permettent d’organiser le code CSS de façon plus cohérente, en évitant de l’éparpiller dans des feuilles alternatives par navigateur.