Ce billet, pour résumer, rappelle la règle d'or de l'équipe des développeurs d'Internet Explorer : Don't Break the Web. Cette règle explique la mise au point, pour la sortie d'Internet Explorer 5 pour Mac en 2000 puis pour celle d'Internet Explorer 6 en 2001, du doctype switch, pour basculer du modèle de boîte du W3C (implémenté par la version 6) vers le modèle de boîte de Microsoft tel qu'il est rendu par les versions 5 et 5.5[1], et ce sous certaines conditions[2].

Pour Internet Explorer 7, toujours par souci de rétrocompatibilité, les améliorations apportées par la version actuelle ne sont visibles que si le mode d'affichage est le mode standard, même si le billet rapporte un curieux retour d'expérience qui prétend que la version 7 a apporté énormément de problèmes de rendu, sous prétexte que les développeurs Web s'attendaient à ce que la version 7 fonctionnât comme la 6 ! 8-O

Pour la future version 8, les énormes progrès annoncés ne seront palpables que si le document HTML comporte un élément meta, dont Aaron Gustafson révèle la syntaxe sur ce billet d'A List Apart.

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

La valeur X-UA-Compatible signifie que le moteur de rendu doit utiliser le nouveau mode standard pour la version du navigateur ciblée par l'attribut content. Cette syntaxe est extensible pour inclure d'autres navigateurs :

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

Ce dernier exemple cible non seulement Internet Explorer 8, mais aussi Firefox 3 et tout autre agent utilisateur dont la version est la 4.

Pour que ce meta fonctionne, il doit être naturellement placé à l'intérieur de l'élément head et situé le plus haut possible. Il peut être précédé d'autres éléments meta ou de l'élément title, mais doit impérativement précéder tous les autres éléments susceptibles d'être placés dans l'élément head (comme les éléments link ou style). En outre, ce meta peut être ajouté dans le DOM par l'intermédiaire de JavaScript.

Étant donné que le meta utilise l'attribut http-equiv, on peut remplacer son utilisation par l'envoi d'en-tête par le serveur. Autrement dit, on peut insérer au début d'un script PHP un code semblable à celui-ci :

<?php
header ('X-UA-Compatible: IE=8;FF=3;OtherUA=4');
?>

Parallèlement, le mode Quirks restera inchangé, de même que le mode standard tel qu'il est actuellement sous la version 7.

Moralité : renseignez sans erreur de frappe ni oubli une DTD HTML 4 ou XHTML et pensez aux meta et aux en-têtes côté serveur et vous ferez avancer durablement l'implémentation des standards.

Notes

[1] Pour rappel, selon le modèle de boîte standard, un bloc d'une largeur de 250 pixels comportant des marges internes (remplissage ou padding) de 20 pixels et des bordures de 5 pixels d'épaisseur occupe en tout un espace de 300 pixels de large. Le modèle de boîte de Microsoft, de son côté, inclut les marges internes et les bordures dans le calcul de la largeur, si bien que le bloc n'occupe qu'un espace de 250 pixels. Dans les deux cas, les marges externes (margin) ne sont pas prises en compte.

[2] L'affichage du modèle de boîte de Microsoft (le mode Quirks) se produit dans les cas suivants : absence de DTD, DTD tronquée ou erronée, DTD d'une version de HTML inférieure à la 4, utilisation du prologue XML dans un document XHTML (dans ce dernier cas, Internet Explorer 7 ne bascule pas en mode Quirks).