Internet Explorer : éviter très simplement des bugs

Voici des petites choses très simples à mettre en place, qu’on soit intégrateur ou pas, qui peuvent faire gagner énormément de temps en débuggage et en code CSS supplémentaire pour notre ami IE, pour qui c’est souvent nécessaire et parfois très long.
A utiliser dans chaque projet !

Désactiver le mode de compatibilité d’IE8

Certains internautes, notamment dans le secteur public, sont sur IE8 avec le mode de compatibilité vers IE7 activé par défaut pour tous les sites.
Ils ont donc IE8, mais qui affiche les sites avec le moteur de rendu d’IE7.
Cela cause des bugs d'intégration et implique de nombreuses modifications et du code CSS supplémentaire..

Ici le mode est activé pour tous les sites :
ie_mode_compat1

Le comportement d’IE correspondant :
ie_mode_compat3

Voir si le mode de compatibilité est activé :
ie_mode_compat2

Il y a une balise <meta> spécialement conçue pour annuler le mode de compatibilité, et qui prend toujours le dessus sur les réglages du navigateur : IE8 basculera alors en mode standard (moteur de rendu d’IE8) au lieu d'être en mode IE7.

Du coup, plus besoin de faire des patchs en CSS, et tous les bugs d’intégration dûs à ce mode sont résolus instantanément !

Voici la balise, à mettre parmi les balises <meta> :

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

"edge" signifie "le plus haut". Cela indique à IE d'utiliser le plus haut moteur de rendu disponible. Pour IE8, c'est le moteur de rendu d'IE8, pour IE9 c'est IE9 etc...

Il faut donc toujours mettre la valeur “edge”, ainsi le site sera toujours affiché avec le plus haut moteur de rendu disponible, y compris dans les futures version d’IE.
Le mode de compatibilité est alors désactivé.
Pour vérifier, il suffit de relancer la page dans IE, et l'icône du mode sera désactivée (voir l'image plus haut).

Note : dans certains cas cela ne fonctionne pas bien, voir les liens à la fin du billet.

Mais il est toujours préférable de spécifier un entête de réponse directement sur le serveur web pour plus de fiabilité. Avec Apache :

<IfModule headers_module>
   Header set X-UA-Compatible: IE=edge
</IfModule>

Ne pas déclencher le mode “Quirks” d’IE

Il faut aussi veiller à ce que IE ne passe pas en mode "quirks". Dans ce mode, il ne tient pas compte des marges internes, externes ni des bordures dans le calcul des largeurs des blocs, ce qui devrait être le cas. La mise en page sera donc complètement cassée.

Pour éviter ce mode il faut notamment:

  • Avoir un doctype comportant l’URL de la DTD (voir le lien dans les références)
  • Ne pas avoir de caractère AVANT le doctype
  • Ne pas mettre de version de HTML inférieure à 4 dans la DTD

Supprimer les différences CSS entre navigateurs

normalize.css

Chaque navigateur a ses propres styles par défaut pour chaque élément HTML (ses valeurs de marges par exemple...).
Pour que notre CSS soit homogène partout (et notamment sur IE, qui est très susceptible), il faut donc partir d’une base commune à tous les navigateurs.

Une pratique courante est d’utiliser un “reset css” : ce sont des lignes CSS qui remettent à zéro tous les styles par défaut du navigateur, quel qu’il soit.
Il faut ensuite définir les valeurs souhaitées dans notre code pour chaque élément.

Mais le reset met tout à zéro, alors que beaucoup de styles par défaut sont utiles (les marges des titres, des paragraphes, la disposition de certains éléments...).
Le problème n’est donc pas d’avoir des styles par défaut, mais il faut avoir des styles par défaut égaux d’un navigateur à l’autre.

Heureusement, un fichier CSS a été mis au point après de longues recherches : ce fichier rend homogènes tous les styles par défaut de tous les navigateurs pour tous les éléments HTML !
Il ne remet pas à zéro, il supprime les différences entre les navigateurs, en améliorant en plus le rendu là où il est mal géré. Nous gardons donc tous les styles de base utiles.

De plus il gère les éléments HTML5, corrige des bugs d’affichage communs, et est compatible avec les navigateurs mobiles. Il est donc valable aujourd’hui mais le sera aussi demain.
C’est donc bien mieux qu’un simple reset.
Cela évite ensuite bien des corrections et ajouts de CSS pour palier aux différences entre navigateurs, car elles beaucoup sont déjà corrigées avec ce fichier.

Ce fichier est normalize.css, disponible sur le site du projet .
Voir la documentation et le fichier commenté

Il doit être ajouté dans chaque page HTML, juste avant le fichier CSS de la page.

Références :

Origine et explication du mode de compatibilité :
http://blogs.msdn.com/b/ie/archive/2008/08/27/introducing-compatibility-view.aspx
http://farukat.es/journal/2009/05/245-ie8-and-the-x-ua-compatible-situation

Astuces si la balise ne marche pas :
http://stackoverflow.com/questions/4987439/ie8-standards-mode-meta-tag
http://stackoverflow.com/questions/4987439/ie8-standards-mode-meta-tag

Avec Apache :
http://msdn.microsoft.com/fr-fr/library/cc817573.aspx

Bien choisir son doctype :
http://www.alsacreations.com/article/lire/560-DTD-comment-choisir.html

Un commentaire

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.