Internet Explorer 8.0 et la compatibilité avec les sites Web - partie 1

Article
01/11/2010

Internet Explorer 8 a créé une rupture bien plus conséquente que celle introduite avec Internet Explorer 7 sur le respect des standards. Ainsi, les équipes de Microsoft ont conçu une batterie de 7200 tests afin de s’assurer qu’IE 8 soit le plus proche possible des standards et de la norme CSS 2.1. En effet, nous voulions aller bien plus loin que le « simple » passage du test ACID 2. IE 8 est donc (enfin ?) un navigateur respectueux des normes en vigueur. Mais est-ce une bonne nouvelle pour les développeurs web ? Oui et non.

Oui car le jour où tous les navigateurs supporterons le plus rigoureusement possible les normes du W3C, la vie du développeur Web n’en sera que plus facilitée. IE 8 vise donc ce souhait via la norme actuellement la plus répandue (CSS 2.1) et une partie du support d’HTML 5 et IE 9 vise l’excellence sur HTML 5 et CSS 3.

Non car nous avons un existant très conséquent d’applications Web vivant en entreprise conçue pour uniquement bien fonctionner avec IE 6. En effet, les préoccupations en Intranet ne sont pas forcément les mêmes que sur le web public. La crainte de nombre de clients que j’ai rencontrés ces derniers temps est donc une réécriture en cas de déploiement d’IE 8 ou Windows 7. En effet, nous avons fait le choix d’utiliser avec Internet Explorer 8 son moteur le plus récent par défaut (CSS 2.1) susceptible de casser le rendu des anciens sites.

Heureusement, nous allons voir qu’il est facile de concilier avec Internet Explorer 8 l’avenir (le support des standards) et le passé (IE 6). La stratégie va donc consister à :

- Conserver les sites existants fonctionnant bien sous IE 6 tels quels et éventuellement (dans une 2^ème phase) d’évaluer l’impact des modifications à effecteur pour que ces mêmes sites soient compatibles IE 8 nativement
- Ecrire les nouveaux sites en étant le plus proche possible des standards

Le tout avec un unique navigateur : Internet Explorer 8 que ce soit sous Windows 7, Windows Vista ou Windows XP.

Mais comment concilier ces 2 mondes avec le même navigateur ? Pour cela, nous avons embarqué 3 moteurs de rendu différents dans l’installation d’Internet Explorer 8 :

- Le mode de rendu dit « Quirks » est celui qui sera le plus proche d’Internet 5.5/6.0
- Le mode de rendu d’Internet Explorer 7
- Le dernier mode de rendu d’Internet Explorer 8 : le plus proche possible de la norme CSS 2.1

Tip : retrouvez l’ensemble de ces moteurs en pressant la touche F12 sous IE8. La touche F12 fait apparaître la barre conçue pour les développeurs mais permet aussi de tester les 3 moteurs de rendu :

Mais alors : à quel moment et comment indiquer lequel des 3 moteurs on souhaite mettre en œuvre ?

La phase purement automatique

Introduit avec IE 6 et véritablement utilisé ensuite par IE 7 pour piloter ses 2 moteurs de rendu, la balise DOCTYPE est recherchée dans le document en cours de navigation. Si cette balise n’est pas trouvée, on peut en conclure que la page présentée a de fortes chances de ne pas supporter les normes et IE 8 bascule alors forcément en mode « Quirks ». Par exemple, naviguez sur ce site : http://www.perdu.com et avec la barre de dev (F12), observez le moteur qu’IE 8 est en train d’utiliser :

Si vous observez le code source :

 <html><head><title>Vous Etes Perdu ?</title></head><body><h1>Perdu sur l'Internet ?</h1>
<h2>Pas de panique, on va vous aider</h2><strong><pre>    * <----- vous &ecirc;tes ici</pre></strong></body></html>

Vous noterez l’absence de toute balise de type DOCTYPE. Internet Explorer 8 a donc bien basculé sur le moteur de rendu d’IE5.5/6.0.

Par contre, si la balise DOCTYPE est bien trouvée, Internet Explorer 8 utilisera son moteur le plus récent et le plus compatible avec les standards. En résumé : un site web présentant une balise DOCTYPE aura des risques d’être mal rendu par défaut sous Internet Explorer 8.

La phase assistée par une balise méta

Pour éviter cela, on peut alors piloter Internet Explorer pour que, malgré la présence de la balise DOCTYPE, il bascule vers le moteur de rendu qui nous arrange. Nous avions déjà abordé le sujet dans le dossier MSDN sur IE 8. Reprenons donc l’information. Le site de référence (en Anglais) se trouvant dans la documentation MSDN : http://msdn.microsoft.com/en-us/library/cc288325.aspx (US)

Pour changer le moteur de rendu d’un site Web complet, il y a deux solutions :

1. Pour le site entier en ajoutant dans l’entête http : X-UA-Compatible:IE=EmulateIE7

1.1 Html

 <html>
 <head>
  <!-- Moteur Internet Explorer 7 -->
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  <title>Ma Page Web</title>
 </head>
 <body>
  <p>Coucou.</p>
</body>
</html>

1.2 Dans le Web.Config sur IIS :

http://msdn.microsoft.com/en-us/library/cc817572.aspx (US)

…

<system.webServer>

</httpProtocol>

</system.webServer>

</configuration>

…

1.3 Meta switch sur Apache :

vous pouvez lire cet article : http://msdn.microsoft.com/en-us/library/cc817573.aspx (US)

2. Ajouter sur toutes les pages la balise meta :

 <meta http-equiv="X-UA-Compatible" content="IE=7">

Les différents modes supportés :

Mode	Description
IE=5	Moteur de rendu IE5 (Quirks)
IE=7	Moteur de rendu IE7 (Standard)
IE=Emulate7	Affichage des DOCTYPE Standard en IE7 (Standard) Affichage des DOCTYPE Quicks en IE5 (Quirks Mode)
IE=8	Moteur de rendu IE8 (Standard)
IE=100	Moteur de rendu IE8 (Standard)
IE=a	Moteur de rendu IE5 (Quirks)
IE=7.5	Moteur de rendu IE7 (Standard)

Conclusion : DOCTYPE + balise meta = compatibilité IE 8 facilement assurée !

Un exemple de site avec balise meta

Vous pouvez tester ce site à travers IE 8 : http://www.ie8demos.com/travelsite/blog7.aspx qui fait partie de la suite de démos prévues pour les nouveautés d’IE : http://www.ie8demos.com/tryit

En regardant le source, on voit bien la présence du tag méta :

 <meta http-equiv="X-UA-Compatible" content="IE=7" />

Du coup, en pressant la touche F12, on observe bien l’utilisation du 2^ème moteur de rendu :

Si vous changez le moteur de rendu pour le forcer à « Internet Explorer 8 Standards », vous noterez le problème de rendu :

Moteur IE7 :

Moteur IE8 :

La phase assistée par GPO ou par une liste de compatibilité

Si vous ne souhaitez toucher à rien du tout, il est possible de définir par GPO quels sont vos sites Intranet devant être rendus en mode IE 7 plutôt que d’insérer une balise méta dans chacun de vos sites ou en déclarant votre site public dans une liste maintenue par Microsoft et poussée vers votre machine via Windows Update. Stanislas vous en parle dans les 2 prochains articles (partie 2 et partie 3). Pour forcer le mode IE5.5 (Quirks) proche d’IE 6, on ne peut forcer qu’à travers la base méta ou sur la configuration du serveur web comme vu précédemment.

Le travail du développeur / intégrateur

Il n’y pas de magie à ce niveau-là. Il faut mettre les mains dans le HTML et le CSS associé en ayant en permanence en tête les recommandations du W3C.

Pour vous aider, je vous conseille 2 outils gratuits :

1 – la barre intégrée de développement (touche F12) d’Internet Explorer 8.

Vous pouvez en effet analyser le HTML et la ou les feuille(s) CSS utilisée(s) pour le document courant pour commencer le travail de correction. Exemple sur www.microsoft.com :

Par ailleurs, vous pouvez en 1 seul click valider au près du W3C le HTML ou le CSS du document actuel pour comprendre les dérives éventuelles actuelles.

Par exemple, toujours sur le site suivant : http://www.ie8demos.com/travelsite/blog7.aspx, en validant le CSS, on observe le rapport suivant qui relève 25 erreurs :

2 – Super Preview

Il existe un super outil justement nommé Super Preview permettant de comparer le rendu entre plusieurs navigateurs sans à avoir à installer ces derniers sur plusieurs machines virtuelles comme on le fait souvent. Cet outil existe sous 2 formes :

- Gratuite : elle permet de comparer les rendus des différentes versions d’Internet Explorer de 6 à 8. Vous pouvez le télécharger ici : SuperPreview for Internet Explorer

- Payante : intégrée à Expression Web 3, elle permet en plus de comparer les rendus de FireFox à ceux d’IE.

Par exemple, reprenons le site http://www.ie8demos.com/travelsite/blog7.aspx et comparons le résultat entre IE 6 et IE 8 :

On voit alors à gauche le rendu du site en IE 6 et à droite en IE 8. En bas à droite, j’ai indiqué de simuler une résolution de 1024x768. Pour terminer, vous pouvez passer la souris sur les éléments du rendu et voir le DOM en parallèle et observez les morceaux de HTML qui génère des différences. On voit ainsi ici par exemple que le DIV « EntriesAll » a des valeurs Size, Left et Top différentes.

Mieux encore, pour mieux cerner les différences, on peut superposer les rendus pour comprendre par transparence les deltas :

Voilà, je pense avoir fait le tour de la question. Je vous laisse maintenant entre les mains expertes de Stanislas pour connaître plus en détails les options qui s’ouvrent à vous côté administration d’Internet Explorer pour gérer ses moteurs de rendu.

David