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

Ajouter une classe CSS dans BODY ou HTML pour Internet Explorer (IE6 — IE9)

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; }

16 commentaires » | Publié le Jeudi 1 avril 2010 dans Intégration web
Vous pouvez laisser un commentaire ou un trackback depuis votre site.

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.

Afin de satisfaire le plus grand nombre, j'ai ajouté
un bouton Flattr parce que vous le valez bien ;)



16 commentaires pour “Ajouter une classe CSS dans BODY ou HTML pour Internet Explorer (IE6 — IE9)”

  1. Matt dit :
    01/04/2010 à 22:36

    Bonne idée, ça reste assez propre par rapport à certaines méthodes plus « bourrines » =).

    Répondre
  2. fetichism dit :
    01/04/2010 à 22:50

    Oep ça peut être utile ! à voir maintenant parce que développer pour IE ça devient assez compliqué lol

    Répondre
  3. Kaaviar dit :
    02/04/2010 à 08:29

    C’est W3C compliant ?

    Répondre
  4. Hedy dit :
    02/04/2010 à 08:36

    Sympa comme astuce mais pour ma part ma balise HTML ressemble à ça :

    Du coup ça devient vite lourd :(

    Répondre
  5. Hedy dit :
    02/04/2010 à 08:37

    Oups, la ligne a sauté : <html xmlns= »http://www.w3.org/1999/xhtml » xml:lang= »fr » lang= »fr »>

    Répondre
  6. Eric Giovannetti dit :
    02/04/2010 à 08:43

    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 Répondre

  • Bruno Bichet dit :
    02/04/2010 à 14:59

    @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) :

    The following attributes are common to and may be specified on all HTML > > elements (even those not defined in this specification):

    • accesskey
    • class
    • contenteditable
    • contextmenu
    • dir
    • draggable
    • hidden
    • id
    • lang
    • spellcheck
    • style
    • tabindex
    • title
    Répondre
  • Eric Giovannetti dit :
    02/04/2010 à 08:45

    Désolé du double post mais une erreur dans l’écriture du lien : Technique similaire pour vérifier si Javascript est activé.

    Répondre
  • ctito17 dit :
    02/04/2010 à 09:01

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

    Répondre
  • Xavier dit :
    02/04/2010 à 09:17

    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.

    Répondre
  • ctito17 dit :
    02/04/2010 à 10:49

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

    Répondre
  • Bruno Bichet dit :
    02/04/2010 à 17:13

    @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.

    Répondre
  • Yves Van Goethem dit :
    02/04/2010 à 19:19

    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.

    Répondre
  • Bruno Bichet dit :
    04/04/2010 à 19:42

    @ctito17 — Oui et finalement c’est la même chose, sauf qu’ici, on cible la balise une fois pour toutes et hop ! ;)

    Répondre
  • Guillaume dit :
    07/04/2010 à 12:44

    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.

    Répondre

    • Laissez un commentaire

    Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

    Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

    Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »

    

    Colophon

    css 4 design 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 - 2010.

    Contactez l'auteur du site

    Google Analytics Alternative