Vous le savez fort bien, il existe 2 modèles de boite CSS : le modèle traditionnel (Microsoft) et le modèle standard (W3C), dont la différence réside dans l'interprétation des dimensions ("width" et "height"). Jusqu'à peu, j'avais toujours cru que le Doctype switching permettait de choisir entre l'un des deux modèles, et pour cause, j'avais de très bonnes raisons de le croire puisque c'est écrit noir sur blanc dans cet article de Laurent Denis sur OpenWeb, je cite :

Le DocType switching : forcer l'une ou l'autre interprétation des dimensions.
les navigateurs récents (IE 5 Macintosh, Netscape 6+ et autres navigateurs basés sur Gecko, Opera 7.x...) exploitent la technique du DocType Switching (...) [et] opteront pour le modèle Microsoft en l'absence de DTD, ou en présence d'une DTD HTML 4.01 transitional sur le modèle : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Ce qui est (en partie) eronné, je l'ai découvert à mes dépends voilà peu. En réalité, le "Doctype switching" permet de choisir le mode de rendu ("quirksmode"1 ou "strictmode"), non le modèle de boite CSS. Le mode de rendu "quirks" a pour objectif de reproduire les comportements et erreurs d'interprétation2 des anciennes versions des navigateurs (IE4, Netscape 4...) afin de préserver la compatibilité avec les anciens sites, là où le mode "strict" permet aux développeurs aguéris de développer selon les standards. Alors certes, avec Internet Explorer ou Opera, le mode de rendu "quirks" utilise le modèle de boite CSS de Microsoft, puisque c'était ainsi que les anciennes versions desdits navigateurs interprétaient les dimensions. Mais en aucun cas Netscape ne les a interprété de cette manière par le passé, et c'est donc en toute logique que le mode de rendu "quirks" de Gecko n'utilise pas le modèle de boite de Microsoft, mais bien le modèle de boite standard.

Fort heureusement, pour ceux qui, comme votre humble serviteur, souhaitent/doivent développer avec le mode de rendu "quirks", veulent mettre en oeuvre un positionnement par CSS et, par dessus tout, souhaitent que cela s'affiche correctement avec Internet Explorer, Mozilla et Opera, tout espoir n'est pas perdu, et c'est la propriété CSS3 box-sizing qui vient nous sauver.

En effet, cette propriété permet de spécifier le type d'interprétation des dimensions que l'on souhaite utiliser : "content-box" (modèle de boite standard) ou "border-box" (modèle de boite Microsoft). Elle est supportée par IE5 mac, Opera 7 et Mozilla (sous le nom "-moz-box-sizing", et ce parce que CSS3 n'est toujours pas normalisé). Ce qui nous donne dans notre cas :

* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}

Ainsi, seule la spécification conjointe d'une DTD invalide (pour utiliser le mode de rendu "quirks") et de la déclaration précédente permet d'utiliser le modèle de boite Microsoft avec IE 5+ win/mac, Opera et Mozilla. Le doctype switching ne suffit pas !

PS : je tiens à préciser que l'objectif de ce billet n'est pas de casser du sucre sur le dos de Laurent Denis ni d'OpenWeb ; celui-ci comme tous les intervenants d'OpenWeb font du très bon boulot, et c'est un site que j'admire tout particulièrement. Mon but est toutefois d'avertir ceux qui, comme moi, se sont formés avec leurs tutoriaux et auraient pas conséquent mal compris ce qu'est le doctype switching et le mode de rendu "quirks".

1 : litérallement "mode capricieux". Si quelqu'un a une meilleure traduction, je suis preneur.

2 : Pour ceux qui veulent approfondir le sujet, des infos sur le mode de rendu quirks de Mozilla ici et d'Opera là.