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.
Personnellement, je ne cherche même pas à rendre mon code compatible avec IE. C'est à eux de s'adapter, pas à moi. J'ai déjà assez de boulot comme ça pour faire celui de MS.
Un peu hard comme approche
Rien qu'ici, qui n'est pas un site spécialement grand publique, y'a tout de même 11% d'IE7 et 6% d'IE6 (ils doivent pas voir grand chose ceci dit 
Hop, déjà tu mets id="center" et tu utilise .center { }, il n'y a pas qu'IE qui ne comprendra pas !
Je te renvoie vers un tutoriel sur le centrage :
http://www.alsacreations.com/article/lire/539-Centrer-les-elements-ou-un...
Oui bon ok, j'ai mixé DIV et ID, ça arrive
Ceci dit, ça marchera pas mieux avec IE sans la faute de frappe 
Yep, on est bien d'accord, alsacréationS est une excellent source d'info dans le domaine. Dernier magnifique tuto de chez eux en date qui a bien tapé sur ma manie de coller des px partout :
http://www.alsacreations.com/article/lire/563-gerer-la-taille-du-texte-a...
... Mais ces utilisateurs sont nombreux, ca vaut peut être le coup de s'en occuper non ?
Mais sinon pour tout ce qui est disposition ne vaut-il pas mieux utiliser un feuille de style de type grille genre blueprint ? y a des gens qui bossent pour que "compatibilité" ai lieu
Ben là, le problème c'était juste cette idiotie de commentaires.. Ceci dit excellent ce projet blueprint, je vais regarder cela de prés, merci !
Cela fait partie des joies du développement Web qui doit être compatible avec IE6/7. Ceci dit c'est un problème bien connu, dés que l'on met quelque chose avant le DOCTYPE IE 6 ou 7 passe en mode « quirks ». Si le document commence par un commentaire, je suppose que cela pose problème à de nombreux analyseurs syntaxiques. Est-ce que la validateur du W3C par exemple accepte cela ?
Je ne peux plus dire vu que je l'ai viré
Tout ce que je peux assurer c'est que au sens strictement XML du terme, j'utilise des commentaires en header pour tagger mes fichiers depuis l'an pèbre et aucun analyseur ne m'en a voulu (sax, jdom, etc.). Mais je ne suis pas développeur WEB non plus, et j'ai plus des habitudes de développeur tout court.
Hello
juste comme ça en passant, j'ai ouï dire qu'ils avaient inversé le fonctionnement depuis la bêta 1, et que IE8 serait en mode "standards maximum" par défaut, et basculerai en Quirks sur ajout de la balise méta (ou très probablement d'un "truc louche" aussi)
à vérifier, mais si c'est vrai, c'est bon !
Ce serait effectivement mieux mais cela me semble dangereux, du point de vu Microsoft j'entends. S'ils cassent toutes les applis qui tournent déjà ça risque de ne pas plaire à leur clients... Faudrait que je vois s'il y a moyen de coller IE8 dans ma VM via un multipleIE quelconque pour tester.
Bon, j'ai testé la 8rc1 et cela fonctionne bien comme je l'ai indiqué. Si je colle un commentaire avant le DOCTYPE je passe bien en mode Quirk. Et si je rajoute, en plus, le META tag X-UI-Compatible, cela passe bien en mode "respect" des standards.
La méthode n'est effectivement pas du goût de tout le monde : adapter les pages web du monde à la sortie de chaque nouvelle version d'un logiciel, vous appelez ça comment ?
Quand tu dis : "Ainsi ce tag pourrait être utilisé rapidement par d'autres moteurs de rendu."
Peu de chance ! Il va à l'encontre même de la notion de standard ! Il en est sa remise en cause même...
Comme on dit par chez moi, il ne faut pas noyer le bébé avec l'eau de bain
Le constat qui est de dire qu'un navigateur qui dit implémenter un standard n'y est en réalité compatible qu'à X % n'est pas l'apanage d'IE même s'il en est l'archétype.
Gecko par exemple aura mis quelques versions avant d'être dans les meilleurs termes avec FF, et il ne le sera réellement qu'avec la version 3.1. Pour l'instant il reste à 71% sur un test comme ACID3 alors Midori (WebKit) est à 97%. Pourtant tout les deux sont censés être 100% compatibles avec les standards testés. Du coup si je fais un site qui utilise à fond le standard, je trouverais pratique d'indiquer avoir testé ce site avec la v3.0.6 de FF et 1.0.1 de Midori. Ainsi j'ai une assurance supplémentaire que le site ne soit pas cassé avec par exemple FF 3.1.
En somme, je ne serais pas aussi catégorique que toi, ce tag est pour moi une idée intelligente qui serait une bonne manière de laisser aux navigateurs le temps de correctement implémenter un standard et de baisser un peu la pression sur les développeurs. Maintenant cela ne change rien au problème d'IE en lui-même, nous somme d'accord. D'ailleurs j'avais jamais lancé le test ACID3 sur IE7 et ça vaut le coup d'oeil...
Pour ne pas faire deux messages, la réponse à au dessus:
Si tu veux faire des tests pour quelque chose qui est en ligne (ou que tu peux mettre en ligne le temps des tests) il y a http://browsershots.org/ qui est une excellente idée et permet de tester bien plus de navigateurs qu'on en aurait l'occasion en une journée (en installant tous les OS et tous les navigateurs un par un ^_^)
Et pour la suite:
Il ne faut pas non plus vouer le saint graal aux tests ACID, certains moteurs ont fait en sorte d'être les premiers à réussir le test ACID3, histoire de se faire un peu de pub, mais le reste des standards n'étaient pas implémentés:
http://linuxfr.org//~yellowiscool/26375.html
Je ne remets pas en cause les résultats de chaque moteur aujourd'hui mais c'est un rappel comme quoi il est facile de tricher pour des tests ponctuels
Totalement d'accord sur le second point et un grand merci pour le premier !!!
Et désolé pour les fautes de conjugaison à la fin, ça pique les yeux
Salut, là ou je ne comprends pas, c'est que c'est le conteneur qui doit avoir la propriété text-align:center, donc ici body. Du coup je vois mal comment ca aurait pu marcher dans n'importe quel navigateur...
Oui mais non
Le text-align sert juste à centrer le texte dans le div #center, il n'est ici que pour des raisons cosmétiques.
Le centrage de ce div est lui assuré par la propriété margin...Ce qui est la méthode préconisée pour centre un bloc. Utiliser text-align, comme ne nom de la propriété l'indique, n'est pas fait pour cela...
Essayes, tu verras ça marche très bien avec tous les (autres) navigateurs.
Poster un nouveau commentaire