Ce billet est la traduction de l’article « What happens in Quirks mode » de Jukka “Yucca” Korpela initialement paru sur le site du Tampere University of Technologie (Finlande) le 13 avril 2007, dernière modification le 28 février 2008.

En mode quirks, les navigateurs se comportent de la façon suivante, bien que tous les navigateurs ne présentent pas toutes ces caractéristiques :

• Le modèle de boîte est incorrect (différent des spécifications CSS bien que peut-être intuitivement plus naturel). Cela veut dire que les propriétés de largeurs et de hauteurs, donnent les dimensions de l’élément »boîte » dans son intégralité incluant les marges intérieures (padding) et les bordures et non juste le contenu de l’élément. (Demo plus loin dans ce document)
• Les dimensions des éléments inline (par exemple les éléments span par défaut) prennent en compte les propriétés de largeur et de hauteur spécifiées (alors que d’après les spécifications CSS, elles doivent être ignorées).
• Les hauteurs en pourcentage pour les éléments (par exemple
<table style="height: 100%;" border="0"> en HTML ou table { height: 100% } en CSS) sont appliquées en utilisant la taille disponible à titre de référence, même si le bloc conteneur a sa hauteur fixée à auto (valeur par défaut). Dans le mode standard, la hauteur est déterminée par les exigences du contenu, mais la hauteur en pourcentage marche quand le bloc conteneur a une valeur spécifique comme hauteur.
• Overflow provoque l’agrandissement de la boite. Quand le contenu d’un élément ne rentre pas dans les dimensions spécifiées (explicitement ou implicitement), overflow:visible (valeur par défaut) veut dire que le contenu dépasse des dimensions définies de la boîte. En mode quirks, les dimensions changent, ça peut être vu facilement par exemple si la boîte à une couleur d’arrière plan ou une bordure.
• Les marges intérieures (padding) pour les images sont ignorées lorsqu’elles sont définies en CSS pour l’élément img ou l’élément input de type image.
• La marge horizontale par défaut d’une image flottante est de trois pixels (au lieu de zéro). Ce qui veut dire que si l’élément img a les attributs align= »left » ou align= »right » ou se voit appliquer les règles CSS float:left ou float:right, le navigateurs se comporte comme si l’image avait l’attribut hscpace= »3″ (ou que sa marge de gauche ou de droite avait une valeur de 3px). Ceci ne s’applique qu’à IE; dans les autres navigateurs, le mode quirks provoquera cette marge d’un seul côté de l’image et sa largeur sera de 2 pixels au lieu de 3.
• L’alignement vertical d’une image se fait sous certaines conditions sur le bas de la boite conteneur, et non sur la ligne de base du texte. Cela arrive quand l’image est le seul contenu à l’intérieur d’un élément, typiquement une cellule de tableau. Ceci veut dire que par exemple, une image dans une cellule de tableau est par défaut en bas de la cellule en mode quirks (ce qui est souvent ce que veut l’auteur) quand en mode standard il y a quelques pixels d’espacement en dessous de l’image (à moins qu’on indique, par exemple vertical-align:bottom pour l’élément img).
• Centrer un bloc en utilisant par exemple margin: 0 auto ne marche pas.
• Les propriétés de font ne sont pas héritées de l’élément body pour les éléments inclus dans les tableaux. Ceci arrive surtout pour font-size mais peut également se produire pour font face, color et line-height. Par exemple, si vous mettez : body{font-family: arial}, il est possible que la police dans le tableau reste celle du navigateur par défaut.
• Pour la propriété font size dans une cellule de tableau, un pourcentage est interprété comme relatif à la taille de base de la police du navigateur, et pas à la taille de police qui est appliquée à l’élément conteneur (la ligne du tableau) par les CSS.
• Les valeurs de taille de police ne sont pas interprétées correctement, la taille medium est plus grande que la taille de police de base du navigateur et small est de la même taille. De la même manière, toute l’échelle, xx-small, x-small, small, large, x-large, xx-large, est systématiquement mal interprétée : chaque valeur est interprétée une taille plus grande qu’elle ne devrait l’être.
• Les valeurs incorrectes des propriétés sont souvent interprétées comme des devinettes, par exemple margin: 10 pour margin: 10px et color:ffffff pour color:#ffffff. Cette erreur de traitement imposée viole les règles des CSS : une règle utilisant une valeur syntaxiquement incorrecte doit être ignorée.
• La casse des lettres n’est pas prise en compte lors l’interprétation des sélecteurs de classe et d’id en CSS. Ainsi, le sélecteur .foo correspond à un élément ayant la classe class= »foo » ou class= »FOO ». Selon la spécification CSS, la casse des sélecteurs de classe ou d’id doit être prise en compte.
• Les noms incorrects sont acceptés dans les classes et sélecteurs d’id. Plus précisément les noms commençant par un point ou un nombre (par exemple, les sélecteurs .123a et #42) sont acceptés.
• La déclaration white-space: pre est ignorée.
• La position fixed n’est pas supportée : la déclaration position: fixed est traitée comme position: static (dans IE7)
• De nombreux ajouts au support des CSS ( comme la propriété max-width et les sélecteurs d’attribut) dans IE7 ne sont pas utilisables en mode quirks. Ce qui veut dire que beaucoup de caractéristiques css n’étaient pas supportées dans IE6 et le sont dans IE7, mais seulement en mode standard. Voir le blog de Microsoft pour les détails sur les modifications CSS pour IE7.
• Interprétation de soupe de balise. Par exemple, si un document contient le code : <p>text<table>...</table>, Firefox traite l’élément p comment étant le conteneur de l’élément table en mode quirks. Dans le mode standard, l’élément ouvrant de table ferme implicitement l’élément p. La différence peut être vue, quand par exemple on met une bordure sur l’élément p. De même, Firefox, accepte un élément ul à l’intérieur d’un élément font. IE suit des règles fausses dans ce genre de cas, même en mode standard, mais un comportement conforme aux standards peut être obtenu en utilisant du code valide et en utilisant explicitement des balises fermantes comme </p> même quand elles sont facultatives.
• Les espaces blancs entre les éléments peuvent être significatifs. Par exemple, disons que vous ayez une liste de liens. Normalement vous écririez le code avec des sauts de lignes entre les éléments de la liste, les éléments li (ce qui est entre les balises </li > et <li>)
  

  <ul>
  <li><a ...>...</a></li>
  <li><a ...>...</a></li>
  ...
  </ul>

  
  Cependant, si vous indiquez display: block et une bordure pour les liens, vous vous retrouvez avec des écarts verticaux (des lignes vides) entre les éléments. Ceci arrive dans IE7 en mode quirks et toujours dans les versions précédentes d’IE.
• Les formulaires ont une marge (margin-bottom) de 1em dans les navigateurs Mozilla. (Dans IE, il y a cette marge dans les deux modes). Ceci est apparemment destiné à poursuivre la tradition des navigateurs web de laisser autant d’espace sous un formulaire. C’est une question fréquemment posée : comment se débarasser de la ligne vide sous un formulaire.
• Les marges verticales sont supprimées dans certains contextes. Par exemple quand un élément p est le premier élément d’un élément td. Ceci est plus ou moins un comportement habituel dans les navigateurs et est présent dans IE dans les deux modes.
• Les navigateurs Mozilla (comme Firefox et Seamonkey) ont des caractéristiques supplémentaires, documentés dans le fichier quirk.css. Par exemple, la couleur par défaut des bordures de tableau est gris (gray) (comme dans la plupart des autres navigateurs), contrairement à l’utilisation de la couleur de premier plan en mode standard. Dans ces cas, le mode quirks est vraiment juste un mode différent de compatibilité. NB : Les paramètres de ce fichier ne s’appliquent pas à toutes les versions de Mozilla.

La liste n’est probablement pas exhaustive. Elle se réfère principalement à IE7. Les autres navigateurs peuvent avoir un mode quirks qui ne simulent les anciennes versions de IE dans la même mesure.

Démo simple

Les images suivantes montrent une des nombreuses différences entre le mode quirks et le mode standard dans Internet Explorer, à savoir le modèle de boîte. Voici les présentations du code suivant dans les deux modes :

<div style="border: solid 2px #006; width: 8em; padding: 0 2em">stuff</div>

(Mode quirks)

(Mode standard)

Voilà l’élément rendu par votre navigateur actuel, pour une vérification rapide :

L’explication est qu’en mode quirks, la propriété width est comprise (incorrectement) comme étant la largeur totale de la boîte, 8em dans ce cas. En mode standards, elle est comprise comme étant le total des éléments de la boîte, soit 12em (plus la largeur des bordures). La largeur totale inclut les marges intérieures (padding) gauche et droite, chacune d’une valeur de 2em.

Dans Firefox, le modèle de boîte correct est appliqué dans les deux modes. Cependant, on peut simuler le modèle de boîte incorrect utilisé par IE en mode quirks en utilisant la commande CSS/ utiliser le mode « border-box » dans l’extension « Web Developper » (Qui est un outil très utile pour toute les questions relatives aux CSS et beaucoup d’autres choses)

Vérifier le mode

Pour vérifier dans quel mode est un navigateur (quirks contre standards),

Dans Firefox, utiliser la commande Outils/Informations sur la page (et regarder l’onglet général); ou si vous avez l’extension « Web Developer », aller dans information/informations sur la page.

Pour IE, taper javascript:alert(document.compatMode) dans la barre d’adresse, et vérifier si la fenêtre d’alerte renvoit alors CSS1Compat (indiquant qu’il s’agit du mode standard) ou BackCompat (indiquant qu’il s’agit du mode quirks); autre alternative,télécharger et installer le Bokmarklet « Quirks or Standards Mode ».