|
Définition
Le modèle de boîte (box model) décrit
la mise en page par "boîtes", et est au cœur du
moteur de représentation HTML de CSS : la spécification
utilise le principe des boîtes imbriquées à
l'infini (potentiellement) pour mettre en page le contenu d'une
page. Bien comprendre le modèle "boîte" est
donc primordial pour construire une mise en page CSS... surtout
quand on sait que certains navigateurs divergent largement de la
spécification lors de l'application des dimensions. Ce modèle
est si important que la prochaine version de CSS, CSS3, prévoie
d'y consacrer un
module entier.
Explication
Avec CSS, le contenu des balises devient boîte, qui elle-même
peut en contenir d'autres, et ainsi de suite... Plus précisément,
chaque élément du document HTML peut être
pris en charge par CSS sous la forme d'une boîte rectangulaire
- CSS leur applique ensuite diverses règles de mise en forme
visuelle.
Chaque boîte
est constituée de quatre éléments : son contenu
(texte ou image), son remplissage (l'espace entre le contenu et
la bordure - du "blanc"), sa bordure (visible ou pas)
et sa marge (l'espace séparant la boîte du reste de
la mise en page).
Lorsque l'on
parle de dimensions au sein du modèle de boîte, on
parle généralement de la largeur (la hauteur étant
le plus souvent définie par le contenu). Il faut savoir que
celle-ci est censée être la somme de l'ensemble des
espaces du modèle : largeurTotale = largeurMarge + largeurBordure
+ largeurRemplissage + largeurContenu + largeurRemplissage + largeurBordure
+ largeurMarge.
Avoir ceci en tête permet de mieux visualiser le résultat
possible des valeurs données à telle ou telle largeur,
et l'implication sur l'ensemble de la boîte.
Exception
et solution
Seulement, il faut prendre en compte le fait que la norme CSS n'est
pas encore parfaitement implémentée parmi les navigateurs
les plus utilisés. Notamment, Internet Explorer 5.x se méprend
totalement et notoirement sur le calcul exposé ci-dessus
: il ne prend en compte que les largeurs de la bordure, du remplissage
et du contenu lors de son calcul de la largeur totale, et laisse
ainsi de coté la largeur de la marge.
De fait, quand on définit une boîte comme faisant 100
pixels de large, avec un remplissage de 10 pixels et une bordure
de 5 pixels, IE5 affiche une boîte dont les bordures gauche
et droite sont distantes de 100 pixels. Cela peut sembler correct
au premier abord, mais
cela devrait être large de 130 pixels : il faut additionner
les 10 pixels des bordures (5+5) et les 20 pixels de remplissage
(10+10) à la dimension demandée. Si IE5 peut sembler
logique, il ne respecte pas pour autant la spécification,
au contraire d'Opéra, Safari et Mozilla...
IE6 respecte mieux la norme CSS, mais uniquement quand le bon DOCTYPE
est spécifié...
Il faut donc
contourner le problème : afficher telle largeur pour IE5,
et telle autre pour tous les autres - ce sont les Box Model Hacks.
C'est Tantek Çelik,
un ingénieur Microsoft, père du moteur Tasman (sur
lequel tourne IE) et de nombreux travaux pour le W3C (notamment
sur les spécification CSS), qui a développé
le hack
de référence : pour contourner le problème,
il exploite un autre bug de IE5, qui ne parvient pas à lire
entièrement le code suivant :
div.contenu
{
padding: 10px;
border: 5px;
border: 5px;
width: 130px;
voice-family: "\"}\"";
voice-family: inherit;
width: 100px;
}
IE5 ne peut
lire la dernière ligne, car il bloque sur les deux précédentes
: il utilise donc la valeur de largeur 130px, tandis que les navigateurs
respectant la norme CSS lisant ce code jusqu'au bout, et appliquent
la valeur de 100px à la largeur totale...
Autre méthode,
assez proche car utilisant un bug de lecture d'IE5:
div
{
padding:
10px;
border: 5px;
border: 5px;
\width: 130px;
w\idth:
100px;
}
D'autres existent,
chacun pouvant répondre à un besoin différent...
|
Accueil
[