A propos du Modèle de boîte Microsoft (ou "quirks")

Internet Explorer interprète les dimensions CSS différemment des autres navigateurs, ou plutôt interprétait... Contrairement à ce que laissent supposer certains articles et propos de designers "chevronnés" qui n’en démordent pas, Internet Explorer 6 de Microsoft interprète les dimensions CSS des pages html et xhml valides de la même manière que les autres navigateurs de même génération.

Alors pourquoi cette confusion ?

Préambule

Si le terme de "Modèle de boîte" vous est totalement étranger, allez lire cet article illustré très complet.

Le fameux mode Quirks

Avec les versions 5.0 et 5.5 d’Internet Explorer lorsque vous avez, par exemple, une "boîte" large de 200 px (zone de contenu), avec des marges intérieures de 20px (padding) et une bordure (border) de 5px vous obtenez une boîte d’une largeur totale de 200px alors que pour les autres navigateurs la largeur totale est de 250px (200+20+20+5+5) Les paddings et les borders, s’ajoutent normalement à la zone de contenu de 200px.

Ce mode de calcul où les propriétés visibles (espaces et bords) sont incluses dans le calcul de la boîte est appelé "mode Quirks". C'est un modèle de boîte ancien et spécifique à Microsoft.

Avec la version 6.0 d’Internet Explorer, l’interprétation des dimensions CSS des boîtes est la même que pour les autres navigateurs, c’est le modèle de boîte dit "Standard".

Il y a cependant quelques exceptions à cette interprétation qui entretiennent l’illusion que rien n’a changé du côté de chez Microsoft.

En effet, IE 6.0 passe en mode Quirk dans les cas suivants :

  • une page HTML sans DOCTYPE (donc non valide),
  • une page HTML Frameset ou Transitionnel avec un DOCTYPE tronqué (sans URL de la DTD),
  • une page HTML qui contient n'importe quel caractère avant la DTD,
  • une page HTML avec une DTD d’une version de HTML inférieure à la version 4,
  • une page avec un DOCTYPE XHTML précédé du prologue XML (prologue inutile pour une page xhtml servie en text/html),

Dans ces différents cas, Internet Explorer 6.0 bascule en mode Quirks et interprète les boîtes selon le modèle Microsoft constaté dans les versions précédentes du navigateur, ce qui pose souvent de lourds problèmes de compatibilité.

Dans tous les autres cas il n’y a pas de différence avec les autres navigateurs... pour le plus grand bonheur des concepteurs web.

Conclusion

Pour faciliter la compatibilité de vos documents web, assurez-vous de leur appliquer un Doctype valide et conforme, et en règle générale de leur parfait respect des standards.

Pour aller plus loin

Billet de Eric Le Bihan (EricLB) remanié par le Collectif Alsacréations.

Par Collectif Alsacréations - lundi 23 octobre 2006 à 10:39

Standards et Accessibilité - #296 - Lu 16836 fois - Intérêt du billet: 4(14) - Fil RSS

Trackbacks

Aucun trackback pour le moment.

Les trackbacks pour ce billet sont fermés.

Evaluez ce billet

Commentaires

Le lundi 23 octobre 2006 à 12:04, par Hadrien :: site :: #

Très interressant !! Merci :)

Le lundi 23 octobre 2006 à 12:04, par Hadrien :: site :: #

(HS :
Question anti-spam :
aimez-vous les skyblogs ? )
XPDR ! :D

Le lundi 23 octobre 2006 à 13:03, par papillon41 :: site :: #

Ne pas oublier qu'un commentaire placé avant le DOCTYPE, fait passer IE6 en mode Quirks.<br />
Par exemple : <!-- édition 1.0 -->

Le lundi 23 octobre 2006 à 15:22, par Oryo :: #

Ben ça alors, je me disais bien que c'était louche cette histoire de boites.

Par contre le problème des fusion de marges a t il un rapport avec les modèles de boites?

Le lundi 23 octobre 2006 à 17:04, par Raphael :: site :: #

@Oryo : "Par contre le problème des fusion de marges a t il un rapport avec les modèles de boites?"

> non pas du tout. En fait la fusion des marges n'est pas un "problème" mais une spécificité tout à fait prévue ;)
www.yoyodesign.org/doc/w3...

Le lundi 23 octobre 2006 à 20:51, par Mike :: site :: #

Très pratique ce billet. Merci bien.

Le lundi 23 octobre 2006 à 21:10, par Whisno :: site :: #

Voilà qui vient d'éclaircir quelque-chose qui restait très mystérieux pour moi =) Merci!

Le mardi 24 octobre 2006 à 02:48, par Kalenx :: site :: #

>>Ne pas oublier qu'un commentaire placé avant le DOCTYPE, fait passer IE6 en mode Quirks.

En fait, tout ajout de texte avant le DOCTYPE fait passer IE6 en mode Quirks...

Le mardi 24 octobre 2006 à 04:43, par Sébastien Guillon :: site :: #

>> En fait, tout ajout de texte avant le DOCTYPE fait passer IE6 en mode Quirks...

...Ce qui n'est pas le comportement attendu d'un Agent Utilisateur HTML conforme.

Le mode par défaut de IE6 semble donc bien être le mode Quirks et non le mode Standards.

Le mardi 24 octobre 2006 à 19:54, par Hum :: #

Merci de continuer à éclairer beaucoup de monde.

Le jeudi 26 octobre 2006 à 14:03, par cynic- :: #

Merci encore une fois, on ne le dira jamais assez :)

Le vendredi 3 novembre 2006 à 10:19, par YoGi :: #

Le mode quirks a des impacts sur CSS, mais pas uniquement, sur le javascript ou le DOM, également.
Il faut plutôt considérer ça comme un mode de rétrocompatibilité (littérallement "capricieux") à l'époque de la "browser war" (la première).
Par ailleurs, cet article d'Openweb est en parti erroné, selon l'aveux même de son auteur (voir darkmag.net/darkBlog/inde... )

Ajouter un commentaire

Les commentaires pour ce billet sont fermés.