IE, du mode Quirk à X-UI-Compatible
Deux heures de galère pour comprendre, une fois de plus, pourquoi Internet Explorer refusent de digérer une définition CSS tout ce qu'il y a de plus standard et dont le seul méfait est de permettre de centrer un DIV. Après une première version un peu énervée de ce billet, petite tentative plus sereine de comprendre "le pourquoi"..
Centrage automatique
D'un point de vue technique, rien de bien sorcier. En suivant la norme, centrer un contenu horizontalement ressemble classiquement à cela :
<!-- exemple de centrage -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Test centrage</title>
<style type="text/css">
#center {
text-align:center;
background-color:black;
color:white;
/* centrage */
margin:0 auto;
width:200px;
}
</style>
</head>
<body>
<div id="center">
Je suis au centre !!!
</div>
</body>
</html>
Pas compliqué pour un sous et pourtant sous IE, ça ne marche pas... Et là c'est deux bonnes heureuse pour comprendre que tout vient de ce malheur commentaire placé avant la définition DOCTYPE, pratique totalement autorisé par la norme XHTML, ce qui peut être facilement vérifié par le validateur du W3C.
Mode Quirk
C'est un contributeur de la précédente version de ce papier qui m'a mis sur la voie de ce mode au nom étrange que j'avais vu traîner plusieurs fois sans y prêter plus d'attention et qui signifie quelque chose comme "excentricité" en anglais. Le mode Quirk d'un moteur de rendu consiste donc simplement à redevenir compatible avec ses anciennes version. Pour IE l'enjeu est de taille de par tous les sites qui ont été tordus pour fonctionner avec ses précédentes moutures. Et ils sont même plus nombreux qu'on ne l'imagine. En effet le WEB publique n'est que la partie visible de l'iceberg et il ne faudrait pas oublier la multitude d'applications WEB internes qui tournent en entreprise (ndlr:les gens qui payent les licences...).
Du coup IE7 tente pour chaque page, de deviner pour quelle version d'IE elle a été conçue. Et dés qu'il "sent" un truc louche, au cas où, il bascule en mode Quirk. Et dans la série des doutes, nous trouvons, ne me demandez pas pourquoi, le commentaire avant le DOCTYPE. La raison donc qui fait que le navigateur oublie les basiques de la norme CSS et ne centre plus mon texte.
Et sous IE6, c'est encore pire, même une entête XML dans le plus pur style de l'art (<?xml version="1.0" encoding="UTF-8"?>), placée comme il se doit avant de DOCTYPE fait basculer le navigateur en mode Quirk.
DOCTYPE cassé
Maintenant le mode Quirk n'est pas une spécificité IE. Tous les moteurs de rendu disposent d'un tel mode dés qu'il s'agit d'afficher du code HTML datant de l'an pébre (aka v3.2). Et pour sortir un peu des bidouilles niveau Vodoo que nous avons vues plus haut, le tag DOCTYPE a justement été créé pour permettre de "forcer" le mode de rendu désiré pour une page. Ainsi le DOCTYPE HTML 3.2 Final (ou alors pas de DOCTYPE du tout) va logiquement provoquer sur la majorité des navigateurs un rendu en mode "capitaine caverne".
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
Maintenant si l'on spécifie un DOCTYPE XHTML 1.1 strict, on s'attend à ce que le document soit interprété de manière correcte :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Et c'est le cas pour tout le monde... sauf pour IE6 qui acceptait joyeusement le DOCTYPE tout en restant en mode Quirk, à cause, au hasard, d'une déclaration XML collée en haut du document... Du coup la fameuse multitude invisibles des sites produits par ceux qui financent Microsoft a continué de grossir. Des gens qui ont conçus des applications WEB uniquement pour IE6 mais qui ont mis malgré tout mis DOCTYPES qui allaient bien, croyant j'imagine que depuis le temps que ce navigateur n'avait pas été mis à jour, c'était là la preuve de la rigueur de son rendu...
Du coup, catastrophe à l'arrivée du tant attendu IE7 pour qui l'équipe de développement, tellement tannée à travers le monde pour son manque de respect des standards, a eu la mauvaise d'interpréter (plus) strictement le DOCTYPES. Du coup, tous les sites de ces messieurs-dames basés sur du Quirk mais rédigés comme du strict, se sont mis à planter salement, ce qui n'a pas beaucoup plus...
Du mode de rendu désiré au navigateur testé
Du coup pour IE8, changement de stratégie. Vous avez sûrement du voir ces derniers temps, au moins une ou deux dizaines d'articles sur le thème "IE8 respecte moins les standards qu'IE5.5", sur la foi d'un test ACID au score pathétique. En réalité c'est totalement voulu avec pour IE8 un mode Quirk... en standard.
Ça peut surprendre mais finalement l'idée n'est pas si idiote que cela, et correspond à une inversion de logique. Vu que chaque tentative de rendre IE plus proche des standards se résume par une volée de coup de pied au cul de la part des "grands utilisateurs", IE sera dorénavant compatible avec IE... sauf indication du contraire.
Et l'indication contraire tente de prendre la leçon d'un problème du DOCTYPE. En effet aucun navigateur n'est 100% compatible avec le DOCTYPE qui déclare accepter. IE6 en est un exemple critique mais même Gecko/Firefox ne fait pas encore un sans fautes au test ACID. Ainsi plutôt que demander une compatibilité illusoire, pourquoi ne pas simplement indiquer ce que l'on sait, à savoir sur quels navigateurs le site a été concrètement testé, et sur lequel donc, nous sommes certain qu'il fonctionne. Il ne resterait alors plus au navigateur à récupérer le page en mimant son fonctionnement de l'époque.
Ainsi pour indiquer à IE8 que c'est bien lui que l'on vise et pas une vieille version moisie, il suffit de coller dans chaque page le META tag suivant :
<meta http-equiv="X-UA-Compatible" content="IE=8" />
Cette approche ne va pas être du goût de tous mais elle a le mérite du pragmatisme en fournissant au navigateur une information essentielle qu'il n'aura plus à deviner. Ainsi ce tag pourrait être utilisé rapidement par d'autres moteurs de rendu. Par exemple pour déclarer qu'un site a été testé pour FireFox 3 et pour IE8, cela donnerait :
<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3" />
Conclusion
Je ne sais pas si FireFox et les autres navigateurs intégreront un jour ce concept mais une chose est certaine, de cette immonde bourbier aura peut-être fini par sortir quelque chose d'un peu malin.
