Tous les articles

Que se passe-t-il en mode quirks ? (traduction)

Par Eric Le Bihan

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.

Le mode quirks est un mode de fonctionnement des navigateurs Web tels qu’Internet Explorer (IE), Firefox et Opera. En gros, le mode quirks (aussi appelé mode compatibilité) signifie qu’un navigateur relativement moderne simule intentionnellement de nombreux bugs des anciens navigateurs, en particulier IE 4 et IE 5.

Le mode quirks est déclenché par le doctype sniffing aussi connu sous le nom de doctype switching. Cela signifie que le navigateur inspecte le début d’un document HTML pour voir si il contient une déclaration de doctype comme requis par les spécifications HTML.

Le but du mode quirks est de faire que les vieilles pages s’affichent comme l’a voulu leur auteur. Les vieilles pages peuvent avoir été écrites pour utiliser les caractéristiques connues des vieux navigateurs ou du moins de s’y adapter. Pour plus d’informations sur le mode quirks, en général, consultez le site QuirksMode.org.

Il n’existe pas de spécification de ce qui se passe en mode Quirks. Après tout, le mode est, par essence, une violation intentionnelle des spécifications CSS et HTML. Cependant, puisque les auteurs peuvent avoir besoin d’une description de ce qui peut réellement se passer dans le mode quirks, j’ai rédigé ce document.

Si vous avez une page existante qui semble bien fonctionner mais qu’il lui manque une déclaration de doctype (exigés par les spécifications HTML), pour commencer vous devriez éviter d’ajouter cette déclaration. La raison en est que la déclaration fait basculer les navigateurs en mode standard opposé au mode quirks. Cela peut donner à peu près n’importe quoi. J’ai vu tout le contenu d’une page disparaître lorsqu’on ajoute une déclaration de doctype. Plus souvent, le [layout] change de façon plutôt inattendue. Eh bien, les résultats ne sont pas inattendus que ça si vous savez ce qui peut se passer en mode quirks. Avant d’ajouter une déclaration de doctype, vous devriez vérifier à la fois le code HTML et CSS pour la correction syntaxique en utilisant les validateurs et vérificateurs. Ce n’est peut-être pas assez, puisque la page pourrait encore avoir été écrit en se fondant sur ce qui «marche» en mode quirks. Ainsi, vous devez tester la page au moins sur IE 7 et Firefox 2 en mode standard, c’est-à-dire après avoir ajouté une déclaration de doctype. Si la page ne fonctionne pas alors, la liste suivante pourrait être utile pour repérer le problème.

Lors de la création d’une nouvelle page, vous n’avez pas besoin d’avoir de connaissances sur le mode quirks et ne devriez normalement pas y penser. Il suffit d’écrire selon les spécifications HTML et CSS, ce qui inclut l’utilisation d’une déclaration de doctype qui fera passer les navigateurs modernes en mode standard. En outre, la déclaration de doctype indiquée dès le début fait passer certains navigateurs en mode quirks, s’il y a quelque chose (même un commentaire) avant. (Ceci entraîne des problèmes si vous utilisez XHTML, mais dans la plupart des cas, vous ne devriez pas utiliser XHTML pour les pages Web de toute façon, pour l’instant.) Mais si vous décidez d’utiliser certaines fonctionnalités qui fonctionnent seulement en mode Quirks, comme l’attribut height = "100%" pour l’élément table, il vous faudra vérifier la liste pour les autres incidences possibles.

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>

Une boîte avec le text \(Mode quirks)

Une boîte avec le texte \ (Mode standard)

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

stuff

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

5 commentaires

Flux RSS des commentaires de cet article

Ce qui n’est pas indiqué ici, c’est que IE7 en mode quirks, se comporte exactement comme IE6 en mode quirks, et donc la plupart des points concernant seulement IE7 sont un peut inutiles, si on considère seulement qu’on part en mode IE6 strict vers du quirks. (enfin bon je me comprend :) )

Le 21 mai. 2008 à 20h23 par Gatsu

[...] Que se passe-t-il en mode quirks ? (traduction) | Les intégristes Lors de la création d’une nouvelle page , vous n’avez pas besoin d’avoir de connaissances sur le mode quirks et ne devriez normalement pas y penser. Il suffit d’écrire selon les spécifications HTML et CSS, ce qui inclut l’utilisation d’une déclaration de doctype qui fera passer les navigateurs modernes en mode standard. [...]

Le 13 mar. 2012 à 10h47 par Webdesign | Pearltrees

Bonjour, votre article est très intéressant cependant il ne résout pas mon problème: toutes mes pages web s’affiche en mode standard, excepté la page du site leboncoin.fr qui s’affiche en mode quirks pouvez vous m’aidez à résoudre ce petit problème? Merci

Le 22 fév. 2013 à 13h43 par ASH

Les commentaires sont fermés sur cet article.