Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8

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

Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8

Les hacks CSS sont une utilisation peu conventionnelle des sélecteurs CSS pour s’adresser à un ou plusieurs navigateurs quand on doit servir une propriété ou une valeur CSS spécifique à un ou plusieurs navigateurs. Si IE6 fait la fine bouche devant sa soupe de balises, il peut être intéressant de lui servir le même plat mais dans une assiette différente (la comparaison est bancale). Ces hacks s’utilisent souvent pour cibler des versions spécifiques d’Internet Explorer (généralement IE6 et IE7). Toutefois, il en existe pour Firefox, Opéra, Safari, iPhone, etc. Par ailleurs, je n’utilise pas ces hacks CSS dans ma feuille de style principale, mais uniquement dans une CSS réservée à IE via les commentaires conditionnels.

Comment utiliser les hacks CSS ?

Dans l’article Un seul fichier CSS pour cibler IE6 et IE7 avec les commentaires conditionnels, j’utilisais un commentaire conditionnel pour cibler les versions inférieures ou égales à IE7. Toutefois, IE9 est sur les rails et il est temps de le prendre en compte, d’autant plus que Microsoft veut en faire un champion des standards du web en terme de rendu CSS3 et HTML5.

L’idée derrière la feuille de style unique pour IE est de ne pas augmenter inutilement le nombre de requêtes pour charger une CSS pour chaque version d’Internet Explorer. En attendant de voir ce que nous réserve IE9, j’ai décidé de cibler les versions inférieures ou égales à IE8 en espérant que IE9 tienne ses promesses et en attendant de voir s’il va continuer à gérer les commentaires conditionnels (auquel cas nous pourrions cibler les version inférieures à IE9).

Cibler les versions <= à IE8

<!--[if lte IE 8]>
    <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen,projection" />
<![endif]-->
De cette manière, les règles CSS placées dans ie.css s’adressent uniquement à Internet Explorer ; les autres navigateurs considèrent ces commentaires conditionnels comme de simples commentaires HTML. Ça va sans dire mais encore mieux en le disant : les déclarations situées dans style.css s’appliquent aussi à Internet Explorer ce qui implique que l’appel à  ie.css doit se situer après style.css pour surcharger les déclarations qui posent problème.

Note : il existe une forme de commentaires conditionnels qui permet de cibler tous les navigateurs sauf Internet Explorer : <!--[if !IE]> <!--> IE Windows ne lira pas ça <!--> <![endif]-->

Dans cette feuille de style ie.css, si IE6 (et seulement lui) ne se comporte pas comme prévu devant #header { margin-top: 0; }, il suffira d’y ajouter * html #header { margin-top: -5px; } pour régler le problème. Si le problème concerne IE6 et IE7 et que IE8 se comporte de manière standard (c’est à dire que la règle située dans style.css suffit), il faudra utiliser les hacks de la manière suivante :

* html #search .submit { margin-top: -10px; } // IE6
*+html #search .submit { margin-top: -14px; } // IE7
En revanche, si vous avez également besoin d’une valeur différente pour IE8, il faudra prendre soin d’ajouter la règle CSS #search .submit { margin-top: -7px; } au-dessus des deux autres, soit :
#search .submit { margin-top: -7px; }         //Toutes les versions d'IE
* html #search .submit { margin-top: -10px; } // Surcharge pour IE6 seulement
*+html #search .submit { margin-top: -14px; } // Surcharge pour IE7 seulement

Mettez vos frameworks CSS à jour

Les frameworks CSS proposent souvent une feuille de style spécifique à Internet Explorer. Le plus souvent, le hack utilisé pour cibler IE7 est de la forme html>body qui n’est pas pris en charge par IE6. Or, si l’on cible les versions <= à IE8, ce hack est obsolète puisqu’il est compris par IE8. Pour y remédier, j’utilise *+html qui n’est compris que par IE7.

Ainsi, dans le fichier ie.css de Blueprint, il sera nécessaire de modifier la ligne html>body p code { white-space: normal; } par +html p code { *white-space: normal; } pour éviter que IE8 ne s’emmêle les pinceaux ;)

24 hacks CSS à consommer avec modération

Cette liste de 22 contournements a été compilée par Paul Irish. Elle présente le double intérêt de la quasi-exhausitivité et de distinguer les hacks jouant sur les sélecteurs de ceux qui concernent les attributs.

Hacks sur les sélecteurs

  1. IE6 et inférieurs

    * html .test  { color: red }
  2. IE7

    *:first-child+html .test { color: red }
  3. IE7, Firefox, Safari, Opera

    html>body .test { color: red }
  4. IE8, Firefox, Safari, Opera (Tout sauf IE 6,7)

    html>/**/body .test { color: red }
  5. Opera 9.27 et inférieurs, Safari 2

    html:first-child .test { color: red }
  6. Safari 2 — 3

    html[xmlns*=""] body:last-child .test { color: red }
  7. safari 3+, Chrome 1+, Opera9+, Firefox 3.5+

    body:nth-of-type(1) .test { color: red }
  8. Safari 3+, Chrome 1+, Opera9+, Firefox 3.5+

    body:first-of-type .test { color: red }
  9. Safaris 3+, Chrome1+

       @media screen and (-webkit-min-device-pixel-ratio:0) {
                .test  { color: red }
        }
  10. iPhone / Webkit mobile

       @media screen and (max-device-width: 480px) {
                .test { color: red }
        }
  11. Safari 2 — 3.1

    html[xmlns*=""]:root .test  { color: red }
  12. Safari 2 — 3.1, Opera 9.25

    *|html[xmlns*=""] .test { color: red }
  13. Safari — Chrome

    .test { [color: #000000; }
  14. Tout sauf IE6 — 8

    :root *> .test { color: red  }
  15. IE7

    *+html .test { color: red }
  16. Uniquement Firefox. 1+

    .test,  x:-moz-any-link  { color: red }
  17. Firefox 3.0+

    .test,  x:-moz-any-link, x:default  { color: red }

Hacks sur les attributs

  1. IE6

    .test { _color: blue }
  2. IE6, IE7

    .test { *color: blue /* or #color: blue */ }
  3. Tout sauf IE6

    .test { color/**/: blue }
  4. IE6, IE7, IE8

    .test { color: blue\9 }
  5. IE7, IE8

    .test { color/*\**/: blue\9 }
  6. IE6, IE7 — fonctionne comme !important

    .test { color: blue !ie } /* la chaine après ! peut être n'importe quoi */
  7. IE8

    .test { color: #0000FF; }

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.



11 commentaires pour “Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8”

  1. Cyril dit :

    Merci pour cet article et cette liste, je suis toujours en train de rechercher des hacks utiles pour les intranet ou beaucoup d’utilisateur sont encore sous ie6!!!!!

  2. Sinon pour éviter les hacks, quelque chose de bien plus intelligent :

    <!–[if !IE]><!–><html><!– <![endif]–> <!–[if IE 6]><html class= »msie6″><![endif]–> <!–[if IE 7]><html class= »msie7″><![endif]–> <!–[if gte IE 8]><html class= »msie8″><![endif]–>

    • Eric Le Bihan dit :

      L’utilisation d’un commentaire conditionnel pour IE8 ne me parait pas indispensable. A mon avis on s’en tire bien avec les commentaires conditionnels pour IE6 et 7, sans hacks d’aucune sorte ; surtout pour des navigateurs comme Safari, Opéra et Firefox, il y a toujours un moyen de les éviter.

      • Bruno Bichet dit :

        @Eric Le Bihan J’ai souvent besoin de modifier le margin-top pour les boutons submit en image, et puis il faut bien préparer l’arrivée de IE9 ;)

        Pour ce qui est des autres navigateurs, je n’en ai jamais utiliser, mais bon, on ne sait jamais…

  3. Bruno Bichet dit :

    @Cyril — Qu’il y a beaucoup d’utilisateurs sous ie6 ou non, n’est pas très important. L’idée, c’est surtout de réserver les hacks pour IE dans une CSS pour IE et non pas dans la feuille de style principale.

    Je me souviens d’une époque où mes CSS étaient truffées de _width: 250px pour IE6 et c’était pas beau à voir ;))

    Yves — Je me suis permis de modifier le code que tu as donné, vu que mon WordPress fait ce qu’il veut ;) Du coup, j’ai supprimé les deux autres commentaires liés à ce problème. J’espère que je ne me suis pas emmêlé les pinceaux.

    L’idée d’utiliser les hacks uniquement dans une CSS réservée à IE, c’est d’éviter d’avoir plusieurs feuilles de style surtout s’il s’agit de quelques déclarations.

    En général, je n’ai pas 36 000 règles CSS spécifiques et franchement faire un ie8.css pour une seule propriété, c’est… contre productif.

    Après, oui, si chaque fichier pour IE est bien rempli, il vaut mieux passer par un commentaire conditionnel par version d’internet explorer ne serait-ce que pour faciliter la lecture et la maintenance.

    Je suis allé un peu vite. Effectivement cette manière de cibler les navigateurs évite de créer des feuilles de style spécifique pour ie.

  4. Agence web dit :

    C’est vraiment une mine d’information sur ce sujet et les différences d’affichages sur les différents navigateurs.

  5. […] 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 […]

  6. […] 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 ? hacks CSS […]

  7. […] Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8 […]

  8. […] 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 ! Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8 […]

  9. Cyril dit :

    Exactement ce que je cherchais !!! Merci beaucoup pour le partage, je peux enfin faire mes conditions pour IE pour mon nouveau site :D

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 & 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