Gérer les modèles de boîtes CSS standard et Microsoft

Rappelons tout d'abord qu'une boîte CSS est constituée :

• d'un contenu (le texte d'un paragraphe par exemple) ;

• d'un remplissage (padding) : l'espace entourant le paragraphe) ;

• d'une bordure (border) : encadrement du paragraphe ;

• d'une marge (margin) : espace entourant le tout.

Les propriétés CSS permettent de déterminer :

• les dimensions de la zone de contenu, son arrière-plan (image, couleur) et sa couleur d'avant-plan ;

• les dimensions, la couleur et le style des bordures ;

• les dimensions du remplissage ;

• les dimensions de la marge.

Dans chaque cas, il est possible de spécifier des dimensions gauche, droite, haut et bas différentes les unes des autres.

Deux interprétations divergentes des dimensions

Les aléas d'implémentation des normes CSS dans les navigateurs ont hélas conduit à la coexistence actuelle de deux modèles de boîtes différents : le modèle standard (celui du W3C) et un modèle propriétaire Microsoft, dû à IE 5 Windows. Ils diffèrent principalement par leur mode de calcul des dimensions apparentes des boîtes affichées par le navigateur.

Nous prendrons ici l'exemple des largeurs :

1. Selon le modèle standard, la largeur apparente d'une boîte sera logiquement égale à la somme de :

   • la largeur spécifiée pour son contenu (propriété CSS width) ;

   • la largeur totale de son remplissage gauche/droite ;

   • la largeur totale de ses bordures gauche/droite.

   Une boîte ayant un contenu de 250 pixels, des padding latéraux de 20 pixels chacun et des bordures latérales de 5 pixels chacune occupera donc à l'écran une largeur totale de : 250 + 20 + 20 + 5 + 5 = 300 pixels.

2. Le modèle de boîte Microsoft considère pour sa part que le remplissage et les bordures prennent place à l'intérieur de la zone de contenu. La largeur apparente d'une boîte sera alors égale à la seule largeur spécifiée pour contenu.

   La boîte précédente n'occupera donc à l'écran qu'une largeur de 250 pixels. Sa zone de contenu se trouvera réduite des dimensions de bordure et de remplissage, soit ici 50 pixels par rapport au modèle standard.

Pour comparer ces deux modèles, créons deux boîtes qui, dans le modèle standard, sont de même largeur apparente :

En CSS :

.jaune {
  background-color: #ffff00;
  width: 300px;
  padding: 0;
  border: 0;
}
.vert {
  background-color: #00ff00;
  width: 250px;
  padding: 0 20px;
  border-left: 5px solid #00ff00;
  border-right: 5px solid #00ff00;
}

En HTML :

<div class="jaune">Box 1</div>
<div class="vert">Box 2</div>

Le résultat affiché dépend du modèle de boîte appliqué :

• dans un navigateur appliquant le modèle de boîte standard, les deux boîtes sont identiques : leur largeur apparente est égale à width+padding+ border, soit 300 pixels dans les deux cas ;

• dans un navigateur appliquant le modèle de boîte Microsoft, la boîte verte est plus petite que la jaune : la largeur apparente étant égale à la seule valeur de width, la boîte verte ne mesure plus que 250 pixels, et sa zone de contenu est réduite à 200 pixels puisqu'elle comprend les zones de bordure et de remplissage.

Vous pouvez vérifier le modèle de boîte utilisé par votre navigateur sur cette page test-modèle de boîte.

Le DocType switching : forcer l'une ou l'autre interprétation des dimensions

Le résultat d'un positionnement précis de plusieurs boîtes adjacentes peut donc être très différent selon le calcul effectué. Comment savoir quel modèle de boîte sera appliqué par quel navigateur ?

• les navigateurs périmés type IE 4.x et Netscape 4.x ne sont pas à prendre en compte puisqu'ils n'ont pas d'implémentation suffisante des propriétés CSS ;

• IE 5.x Windows ne connaît que le modèle Microsoft ;

• 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, qui permet ici de choisir le modèle appliqué, en fonction de la Déclaration de Type de Document (DTD) spécifiée en tête de la page à afficher. Pour résumer, ces navigateurs récents 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" "http://www.w3.org/TR/html4/loose.dtd">  ;

  • le modèle Standard en présence d'une DTD HTML strict sur le modèle : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Ou d'une DTD XHTML quelle qu'elle soit, sur le modèle : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ou <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> .

Note : La présence d'un prologue XML (<?xml version="1.0"?>) fait basculer plusieurs navigateurs (Opera 7, MSIE 6 Windows) dans le modèle de boîte Microsoft, en dépit de la DTD XHTML

Gérer les dimensions dans MSIE 5.x

Reste le cas d'IE 5.x Windows : comment obtenir un résultat correct à partir de dimensions prévues pour le modèle de boîte standard, puisqu'il n'applique que son propre modèle ?

Tantek CELIK a mis au point une méthode de contournement devenue fameuse, le box model hack. Il exploite une erreur de parsing d'IE 5.x Windows, c'est à dire un défaut dans sa manière de lire la syntaxe CSS2. Ceci permet de :

• stipuler une dimension incorrecte qui ne sera utilisée que par le navigateur fautif ;

• rétablir la valeur correcte pour les navigateurs appliquant le modèle de boîte standard.

La syntaxe à utiliser est :

.vert {
  background-color: #00ff00;
  padding: 0 20px;
  border-left: 5px solid #00ff00;
  border-right: 5px solid #00ff00;
width: 300px;
  voice-family: "\"}\"";
  voice-family:inherit;
  width: 250px;
}
html>body .vert {
  width: 250px;
}

Explication :

• width: 300px est la dimension erronée nécessaire à IE 5.x Windows : 250 pixels de contenu et 50 pixels supplémentaires pour le remplissage et les bordures ;

• voice-family: "\"}\""; voice-family:inherit; est la syntaxe particulière qui cachera ce qui suit à IE 5.x Windows et ne le laissera lire qu'aux navigateurs respectant le modèle de boîte standard ;

• width: 250px; est la dimension correcte pour ces derniers 

• html>body .vert {width: 250px;} résout une difficulté supplémentaire : certains navigateurs comme Opera 5 partagent le parsing bug d'IE 5.x Windows tout en appliquant le modèle de boîte standard. Ces navigateurs ne liraient donc que la dimension erronée, mais ont besoin de la dimension correcte. Ces lignes, ignorées par MSIE 5.x Windows, leur permettent de percevoir finalement la valeur correcte.

Si vous utilisez MSIE 5.x, vous pouvez vérifier le fonctionnement du box model hack dans cette seconde partie de la page test - box model hack.