Worldlex Wiki développement web , le modèle de boîte CSS décrit la manière dont les éléments HTML sont modélisés par les moteurs de rendu des navigateurs et dont leurs dimensions sont déduites des propriétés CSS . Il s'agit d'un concept fondamental pour la composition des pages web HTML . Les principes du modèle de boîte sont définis par le World Wide Web Consortium (W3C), et plus précisément par le groupe de travail CSS. Pendant une grande partie de la fin des années 1990 et du début des années 2000, des implémentations non conformes aux normes du modèle de boîte ont été utilisées dans les principaux navigateurs. L'arrivée de CSS2 en 1998, qui a introduit la box-sizingpropriété `box`, a permis de résoudre en grande partie ce problème.
pet blockquote`<span>` — une largeur et une hauteur, ainsi que trois niveaux de cadres : le remplissage, les bordures et les marges. Bien que la spécification n’utilise jamais explicitement le terme « modèle de boîte », celui-ci est devenu courant chez les développeurs web et les fournisseurs de navigateurs.Tous les éléments HTML peuvent être considérés comme des « boîtes », y compris divles balises <img>, p<p> et a<div>. Chacune de ces boîtes possède cinq dimensions modifiables :
- et décrire les dimensions du contenu réel de la boîte (texte, images, ...
height)width - l'
paddingespace décrit se situe entre ce contenu et le bord de la boîte - il
borders'agit de toute forme de ligne (continue, pointillée, tiretée...) entourant la boîte, si elle est présente. - l'
marginespace autour de la frontière
Selon la spécification CSS1, publiée par le W3C en 1996 et révisée en 1999, lorsqu'une largeur ou une hauteur est explicitement spécifiée pour un élément de type bloc, elle ne doit déterminer que la largeur ou la hauteur de l'élément visible, les marges internes, les bordures et les marges externes étant appliquées ultérieurement. Avant CSS3, ce modèle de boîte était connu sous le nom de modèle de boîte W3C ; en CSS3, il est connu sous le nom de modèle de boîte W3C content-box.
La largeur totale d'une boîte est donc margin-leftde + border-left+ padding-left+ width+ padding-right+ border-right+ margin-right. De même, la hauteur totale d'une boîte est égale à margin-top+ border-top+ padding-top+ height+ padding-bottom+ border-bottom+ margin-bottom.
Par exemple, le code CSS suivant
CSS3 a introduit le modèle de boîte d'Internet Explorer dans la norme, connu sous le nom de border-box.
Histoire
Avant HTML4 et CSS, très peu d'éléments HTML prenaient en charge à la fois les bordures et le remplissage. La définition de la largeur et de la hauteur d'un élément était donc peu sujette à controverse. Cependant, elle variait selon l'élément. L'attribut `width` d'un tableau définissait sa largeur, bordure comprise . En revanche, l'attribut `width` d'une image définissait sa largeur (bordure comprise) . À cette époque, seul l'élément `cell` du tableau prenait en charge le remplissage. La largeur d'une cellule était définie comme « la largeur suggérée pour le contenu de la cellule en pixels, sans le remplissage »
En 1996, CSS a introduit les marges, les bordures et le remplissage pour de nombreux éléments supplémentaires. Il a adopté une définition de la largeur en relation avec le contenu, la bordure, la marge et le remplissage, similaire à celle d'une cellule de tableau. Ce modèle est depuis connu sous le nom de modèle de boîte du W3C .
À l'époque, très peu d'éditeurs de navigateurs appliquaient scrupuleusement le modèle de boîte du W3C. Les deux principaux navigateurs de l'époque, Netscape 4.0 et Internet Explorer 4.0 , définissaient tous deux la largeur et la hauteur comme la distance d'un bord à l'autre. Ce modèle a été désigné comme le modèle traditionnel ou le modèle de boîte d'Internet Explorer .
Internet Explorer en « mode de particularités » inclut le contenu, le remplissage et les bordures dans une largeur ou une hauteur spécifiée ; cela entraîne un rendu plus étroit ou plus court d'une boîte que celui obtenu en suivant le comportement standard.
Le comportement du modèle de boîte d'Internet Explorer était souvent considéré comme un bogue, car les versions antérieures d' Internet Explorer géraient le modèle de boîte et le dimensionnement des éléments d'une page web différemment de la méthode standard recommandée par le W3C pour le langage CSS . Depuis Internet Explorer 6 , le navigateur prend en charge un mode de rendu alternatif (appelé « mode conforme aux normes ») qui résout cette incohérence. Cependant, pour des raisons de compatibilité ascendante, toutes les versions continuent de se comporter par défaut de manière non standard (voir le mode de compatibilité ). Internet Explorer pour Mac n'est pas concerné par ce comportement non standard.
Solutions de contournement
Internet Explorer 6 et versions ultérieures ne sont pas affectés par ce bogue si la page contient certaines déclarations de type de document HTML . Ces versions conservent le comportement anormal en mode de compatibilité ascendante. Par exemple, le mode de compatibilité est déclenché :
- Lorsque la déclaration du type de document est absente ou incomplète ;
- Lorsqu'un document HTML 3 ou antérieur est rencontré ;
- Lorsqu'une déclaration de type de document HTML 4.0 Transitional ou Frameset est utilisée et qu'un identificateur système (URI) n'est pas présent ;
- Lorsqu'un commentaire SGML ou tout autre contenu non reconnu apparaît avant la déclaration de type de document
- Internet Explorer 6 utilise également le mode de compatibilité s'il existe une déclaration XML avant la déclaration du type de document.
Diverses solutions de contournement ont été mises au point pour forcer Internet Explorer 5 et les versions antérieures à afficher les pages Web selon le modèle de boîte du W3C. Ces solutions exploitent généralement des bogues sans lien apparent dans le traitement des sélecteurs CSS d'Internet Explorer afin de masquer certaines règles au navigateur. La plus connue est la « solution de contournement du modèle de boîte » développée par Tantek Çelik , un ancien employé de Microsoft qui a conçu cette idée alors qu'il travaillait sur Internet Explorer pour Macintosh. Elle consiste à spécifier une déclaration de largeur pour Internet Explorer pour Windows, puis à la remplacer par une autre déclaration de largeur pour les navigateurs compatibles CSS. Cette seconde déclaration est masquée à Internet Explorer pour Windows grâce à l'exploitation d'autres bogues dans sa façon d'analyser les règles CSS. La mise en œuvre de ces « astuces » CSS a été complexifiée par la sortie d'Internet Explorer 7, qui, bien que corrigeant certains problèmes, en conserve d'autres, entraînant des résultats indésirables sur les pages utilisant ces solutions.
Les solutions de contournement du modèle de boîte se sont révélées peu fiables car elles reposent sur des bogues dans la prise en charge CSS des navigateurs, susceptibles d'être corrigés dans les versions ultérieures. C'est pourquoi certains développeurs web recommandent plutôt d'éviter de spécifier à la fois la largeur et le remplissage d'un même élément, ou d'utiliser des commentaires conditionnels et/ou des filtres CSS pour contourner le bogue du modèle de boîte dans les anciennes versions d'Internet Explorer.
Prise en charge du modèle de boîte d'Internet Explorer
Le concepteur web Doug Bowman a déclaré que le modèle de boîte original d'Internet Explorer représente une approche plus logique et plus pertinente. Peter-Paul Koch prend l'exemple d'une boîte physique, dont les dimensions se réfèrent toujours à la boîte elle-même, y compris le remplissage éventuel, mais jamais à son contenu. Il affirme que ce modèle de boîte est plus utile aux graphistes, qui conçoivent leurs mises en page en fonction de la largeur visible des boîtes plutôt que de la largeur de leur contenu. Bernie Zimmermann estime que le modèle de boîte d'Internet Explorer est plus proche de la définition des dimensions et du remplissage des cellules utilisée dans le modèle de tableau HTML.
Le W3C a intégré la propriété « box-sizing » à CSS3. Lorsqu'elle box-sizing: border-box;est spécifiée pour un élément, son remplissage et sa bordure sont dessinés à l'intérieur des dimensions indiquées, « comme c'est généralement le cas avec les navigateurs HTML traditionnels » . Internet Explorer 8 , les navigateurs WebKit tels qu'Apple Safari 5.1 et versions ultérieures, Google Chrome , ainsi que les navigateurs basés sur Gecko comme Mozilla Firefox 29.0 et versions ultérieures, Opera 7.0 et versions ultérieures, et Konqueror 3.3.2 et versions ultérieures prennent en charge la propriété CSS3 « box-sizing ». Les navigateurs Gecko antérieurs à la version 29.0 offrent la même fonctionnalité via une propriété spécifique au navigateur -moz-box-sizing . est le modèle de boîte par défaut utilisé par le framework Bootstrap .border-box