Quirks mode, kézako ?

Le quirks mode appelé aujourd’hui en français mode de compatibilité (avec Internet Explorer). Selon différents critères, une page sera affichée en respectant de manière stricte les conventions établies par le W3C, ou selon des méthodes de rendu propres au navigateur. Le Quirks mode correspond à ce dernier mode de rendu.

Le principal point de désaccord entre le mode strict et le Quirks mode concerne le rendu des blocs. Ces divergences datent de l’époque d’Internet Explorer 4 et Netscape 4, autant dire que c’est le Moyen-Âge du web ! Au fil des nouvelles versions, Internet Explorer s’est lentement rapproché des standards. Disons en fait que les développeurs ont essayé d’implémenter plus correctement certains éléments, et en ont oubliés d’autres. Le tir semble être enfin réajusté avec la version 8. Quand à Netscape, le navigateur a disparu au profit de Firefox, généralement bien respectueux des normes. Cependant un dilemme s’est posé aux développeurs : en améliorant le moteur de rendu pour se rendre conforme aux recommandations du W3C, les vieux sites internet risquaient de ne plus s’afficher correctement.

Un compromis fut trouvé : si le concepteur de la page connait bien les standards, alors il fera l’effort d’indiquer qu’il souhaite utiliser le mode strict, sinon, la page est affichée en Quirks mode : à l’ancienne. Ceci s’applique sur tous les navigateurs récents.

Comment choisir le mode d’affichage ?

En fait, il fallait utiliser un élément du langage propre aux recommandations récentes, c’est pourquoi si l’intégrateur utilise un DocType standard, la page est affichée en mode strict. On parle de DocType Switching. Si un nouveau DocType inconnu du navigateur est utilisé, cela signifie probablement que celui-ci est trop récent pour être interprété : le mode strict est alors utilisé.

Par ailleurs, sous internet explorer, l’utilisation d’un prologue XML comme celui-ci :

<?xml version="1.0" encoding="iso-8859-1"?>

Internet Explorer 6 passera directement en mode Quirks, peut importe la DTD utilisée. Ce comportement disparait avec Internet Explorer 7.

Enfin, l’utilisation d’un type mime xml, obligera le navigateur à afficher la page en mode strict, cependant, Internet Explorer 6 ne supporte que le type text/html, et dans les autres cas, la page sera affichée comme un fichier texte (donc le code sera visible).

Almost Strict Mode, Strict… mais pas tout à fait

Les standards considèrent que les images sont des éléments en ligne. Ce comportement entraine une marge inférieure indésirable qui correspond à l’espace occupé en dessous de la ligne par des lettres comme le “p” ou le “g”. Pour supprimer cette marge, la seule solution consiste à considérer l’élément comme un bloc à l’aide de la propriété display: block;.

La situation étant un peu confuse, le Almost Strict Mode correspond au mode strict avec une exception : les image sont des blocs. Ce cas ce présente en utilisant un autre DocType que le X/HTML Strict (ou XHTML 1.1).

Les différences de rendu des blocs

La principale différence entre ces deux modes de rendu concerne donc le rendu des blocs. En effet, en Quirks mode, le navigateur considère que la valeur de les prorpriétés width et height correspondent à la largeur et hauteur du bloc, et donc que l’on inclue la taille des marges dedans, alors que le W3C considère qu’il faut ajouter à la largeur (ou la hauteur), les marges et la bordure.

Pour la feuille de style suivante, l’interprétation sera différente :

.bloc
{
  width: 250px;
  margin: 12px;
  padding: 12px;
  border: 2px #000000 solid;
}

Chez microsoft, la taille de la zone de texte sera 250 - 12*2 - 12*2 - 2*2 = 200px. (il y a une bordure de chaque côté).
Pour le W3C, on trouve que la taille du bloc sera 250+12*2 + 12*2 + 2*2.

D’autres différences existent, vous pouvez en prendre connaissance sur l’un des sites de référence sur le support des standards Quirksmode (en anglais).

Finalement ?

Finalement, avec la disparition programmée d’Internet Explorer 6 et l’arrivée de la version 8, le Quirks Mode n’a pas beaucoup d’importance pour un intégrateur respectueux des standard. Cependant, il est encore un peu trop tôt pour passer ces subtilités sous silence, surtout si vous héritez du code d’un vieux site.