Accueil > Tutoriels > Parades contre les bugs CSS de IE6!!

Parades contre les bugs CSS de IE6!!

Si vous êtes Webdesigner ou intégrateur XHTML, vous vous êtes sans doute souvent confronté au problème lié à Internet Explorer 6. Celui-ci interprète de manière totalement arbitraire les règles et normes CSS édictés par le W3C – bref un vrai casse-tête !

Je dresse ici quelques parades bien utiles à ce problème vieux de 8 ans…

Parade 1 : Créer une feuille de style séparée

Cette parade est la plus souvent utilisé, il s’agit de faire une feuille CSS séparé spécialement pour IE6. Attention tout de fois de bien la mettre en dernier lieu dans la liste des feuilles CSS (c’est la dernière qui a priorité sur les autres).

Voici la balise à mettre :

  <!--[if lt IE 7]>
     <script type="text/javascript" src="js/unitpngfix.js"></script>
     <link href="css/style.ie6.css" rel="stylesheet" type="text/css" media="screen" />
  <![endif]-->

Parade 2 : Utiliser les hacks CSS

Pour plusieurs raisons, la feuille de style IE6 ne suffit pas (bug aussi présent sur IE7, propriété CSS qui dépend directement d’une autre, ou tout simplement la flemme). Aussi, il existe quelques hack bien utile pour contourner le problème. Sachez toutefois que si vous utilisez un validateur, celui-ci peut vous mettre une erreur (c’est des hacks faut pas l’oublier Wink.

Voici les hacks (attention l’ordre à de l’importance) :

  1. Propriété pour moteur Gecko (Firefox, Safari etc.)
    ex : margin:20px; (ou 20px !important; si seulement appliqué au moteur Gecko)
  2. Propriété uniquement pour IE7 et IE6
    ex : /margin:18px;
  3. Propriété pour IE6
    ex : -margin:17px;

Parade 3 : le boycott engagé !

Si vous en avez vraiment ras-le-bol d’IE6, vous pouvez aussi gentiment proposé à vos visiteurs de télécharger un navigateur plus récent à travers un petit script Java.

Vous pourrez trouver un pareil script sur http://www.ie6nomore.com/

IE6 NO MORE

IE6 et transparence

Internet Explorer est un vrai casse-tête pour tout Webdesigner car en plus de cela, il ne supporte pas la transparence des PNG (ce qui est un véritable frein créatif !!).

Pour pallier à ce problème, je vous conseille l’excellent unitpngfix.

Conclusion :

Internet Explorer 6 est un véritable boulet à l’heure du Web 2.0 et des nombreuses fonctionnalités possibles. En effet, il a été pendant très longtemps un frein pour les développeurs Web. Le debug IE6 à lui tout seul peut prendre hélas énormément de temps.

Malheureusement, même si de plus en plus de gens se tournent vers des navigateurs alternatifs tel que Firefox ou Chrome, une grande majorité des gens demeurent sur IE6.

2 choix s’offrent à vous : soit vous prenez du temps et vous vous prenez les dents sur les bugs sur IE6, soit vous décidez de boycotter IE6 purement et simplement.

Mon opinion sur le sujet est un peu puriste mais, j’opte personnellement pour les 2. Il est important de faire migrer les gens sur des navigateurs plus récent tout comme il est important de rendre accessible votre site à cette partie des utilisateurs.

Seul point positif à IE6, quand vous vous rendez compte que votre page html fonctionne tout aussi bien sur Firefox que sur IE6, c’est que votre code est irréprochable ! (bon c’est ma petite fierté du geek, j’avoue ^^)

Partagez !
  • Print
  • Facebook
  • Google Bookmarks
  • email
  • LinkedIn
  • Live
  • MySpace
  • Netvibes
  • PDF
  • Yahoo! Bookmarks
  • Add to favorites
  • viadeo FR

admin Tutoriels

  1. Pas encore de commentaire
  1. Pas encore de trackbacks

Click to Insert Smiley