digiboy

Technologie, musique, graphisme, lifestyle, videogames, films, mode …
Abonnez vous à mon flux Rss

Les solutions pour régler le problème Internet Explorer

ie6Internet Explorer, c’est un peu à internet ce que le Schweppes Agrumes est au foie gras. C’est même à se demander si Microsoft n’a pas voulu sciemment ennuyer tout le monde en sortant une pléthore de navigateurs tous les plus différents les uns que les autres. Une vraie chienlit pour les webdesigners.

Malheureusement, ces derniers sont obligés de se battre pour rendre leurs sites compatibles avec Explorer en usant de patchs, de hacks, ou de rustines. Une vraie perte de temps, mais aussi une satisfaction de voir son site tourner correctement.

3 approches : les scripts, les hacks et la dissuasion.

On retrousse ses manches …

Voici quelques scripts pour faciliter la vie des webdesigners.

IE7 {css2:auto;} : Une librairie Javascript pour rendre IE compatible avec les standards édictés par le W3C et la transparence Png pour IE5 et 6. Un commentaire conditionnel suffit à charger le script qui corrige bon nombre de problèmes. Encore en beta, c’est hébergé chez Googlecode. 2 versions sont proposés, une pour rendre IE5-6 équivalent à IE7 et une autre pour donner aux navigateurs inférieurs à IE8 des règles Css complémentaire.

IE PNG Fix : Ce script ajoute le support pour IE 5.5 et + de la transparence Png. Il suffit d’appeler le fichier iepngfix.htc via une règle css

img {
behavior: url(chemin/iepngfix.htc);
}

Une limitation tout de même : comme pour IE7-Js, la répétition des images transparentes n’est pas prise en compte.

Whatever:hover : est un petit script qui patche les états :hover, :active, et :focus pour I6, IE7 et même IE8 dans son monde quirks. Indispensable pour tout site web 2.0.

body {
behavior: url("csshover3.htc");
}

Voici quelques hacks pour faciliter la vie des webdesigners.

Les commentaires conditionnels : Le but est de créer des feuilles de styles pour chaques versions de IE.

<!--[if IE]> placer ici votre code pour IE <![endif]-->
<!--[if IE 6]>placer ici votre code pour IE 6endif]-->
<!--[if gte IE 5.5000]>placer ici votre code pour IE5.5 et supérieur <![endif]-->
<!--[if lt IE 6]>placer ici votre code pour IE5 et IE5.5 <![endif]-->
<!--[if lt IE 7]>placer ici votre code pour IE inférieur à IE7 <![endif]-->
<!--[if lte IE 6]>placer ici votre code pour IE5, 5.5 et 6 mais pas IE7<![endif]-->

En savoir plus

Les hacks Css : Dans votre feuille de styles, vous pouvez customiser vos règles afin quelles ne soit lues que par certains navigateurs.

* html .bloc {
/* Que pour IE6 et inférieurs */
}
*+ html .bloc {
/* Que pour IE7 */
}
/* le truc suivant est récupéré chez http://prlamnguyen.blogspot.com/2008/11/dont-kick-your-visitorss-ie-6-and-below.html*/
.bloc {
margin-left: 20px; /* all browsers including Mac IE */
*margin-left: 22px; /* IE 7 and below */
_margin-left/**/: 18px; /* IE 5.0 */
_margin-left:/**/ 22px; /* IE 5.5 only */
_margin-left/**/:/**/ 18px; /* IE 6 only */
}

Voici quelques solutions pour tenter de raisonner les internautes perdus.

Browse Sad : Un principe tout bête; on applique un filtre noir et blanc sur la version IE6 du navigateur avec un message expliquant le pourquoi de la démarche. La mise en place est enfantine. Après la balise <body> on insère un commentaire conditionnel qui contient quelques règles de style et un texte et vous voilà armé.

<!-- BrowseSad.com -->
<!--[if IE 6]>
<style type="text/css" media="screen">
html {filter:gray;}
body {margin-top:0;}
#browseSad {background:#000;border-bottom:10px solid #fff;left:0;top:0;width:100%;}
#browseSad * {color:#fff;text-align:center;}
#browseSad div {margin:24px 48px;}
#browseSad h1 {font-size:21px;margin:0 0 5px;}
#browseSad h2 {font-size:16px;margin:0 0 10px;}
#browseSad p {font-size:14px;margin:0;}
#browseSad a {font-weight:bold;text-decoration:underline;}
</style>
<div id="browseSad"><div>
<h1>Oh dear, you are using Internet Explorer 6! It is time for an update!</h1>
<h2>We are sorry but Internet Explorer 6 is so old that we cannot support it anymore.</h2>
<p>Please go to <a href="http://browsesad.com">Browse Sad</a> website to find out why and how to upgrade your browser.</p>
</div></div>
<![endif]-->

browsesad-digiboy

CrashIE : Une redirection de votre site vers http://crashie.com et hop, un joli plantage de IE. Pour les autres navigateurs pas de soucis. Pas très intelligent, mais drôle. Ce qui cause le crash est un script qui rend dingue IE.

<script>for(x in document.write){document.write(x);}</script>

A réserver aux furieux tout de même.

StopIE6 : le principe est d’insérer un script qui empêche de naviguer sur le site avec IE6. un peu extrême et peu applicable dans un environnement professionnel. Pour en savoir davantage, j’en ai déjà parlé ici.

Si malgré tout ça, vous n’arrivez toujours pas à vous faire à l’idée que IE existe, il vous reste un peu de lecture pour vous détendre: IE doit disparaitre et même, IE est dangereux pour votre santé.

email

3 commentaires

  1. green card dit :

    Y a-t-il des informations sur ce sujet dans d’autres langues ? Happy new year for everyone.

  2. digiboy dit :

    Oui, tu peux trouver beaucoup d’informations sur Google sur ce sujet. Bonne année à toi :)

  3. Bonjour,

    J’utilise également le hack IE sur mon site, mais le validateur W3C m’affirme que behavior n’est pas valide en CSS, auriez vous une alternative ?

    body {
    behavior: url(« csshover3.htc »);
    }

    Merci d’avance, et merci pour vos contributions.

Laisser une réponse