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

Actualité par (Intégrateur du Dimanche, Strasbourg)
Créé le , mis à jour le (31236 lectures)
Tags : accessibilité

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é de la déclaration XML (déclaration 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.

Commentaires

Hadrien a dit le

Très interressant !! Merci :)

Hadrien a dit le

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

papillon41 a dit le

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

Oryo a dit le

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?

Raphael a dit le

@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...

Mike a dit le

Très pratique ce billet. Merci bien.

Whisno a dit le

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

Kalenx a dit le

>>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...

Sébastien Guillon a dit le

>> 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.

Hum a dit le

Merci de continuer à éclairer beaucoup de monde.

cynic- a dit le

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

YoGi a dit le

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... )