Le modèle Box: Internet Explorer vs W3C

Aujourd'hui, le problème du modèle de boîte d'Internet Explorer est principalement un problème. La plupart des développeurs Web placent une <!DOCTYPE>balise pour faire respecter les normes, et plus personne ne se soucie vraiment de la prise en charge d'Internet Explorer 5.5.

Cependant, certains développeurs ont proposé des arguments conceptuels subjectifs pour défendre le modèle de boîte IE. Ils ont affirmé que le modèle de boîte IE est plus "intuitif" que le modèle W3C, car le modèle W3C mesure le contenu de la boîte, tandis que le modèle IE mesure la boîte elle-même:

Je peux voir leur point de vue, mais c'est essentiellement un argument subjectif, et le plus important est la conformité aux normes.

Cependant, récemment, je suis venu à préférer le modèle de boîte IE pour de sérieuses raisons pratiques . Le modèle de boîte W3C rend difficile le redimensionnement dynamique d'un élément à la largeur exacte de pixels à l'écran d'un autre élément. La raison en est que la style.widthpropriété d'un élément ne tient pas compte de la taille totale à l'écran de l'élément: vous devez également prendre en compte toute bordure et remplissage supplémentaires. Ce n'est pas un problème si les deux éléments utilisent la même classe CSS - mais s'ils ont des classes CSS différentes , cela peut devenir incroyablement difficile.

Supposons que nous ayons deux divs: A et B. A est codé en dur dans le html comme un div 400px, tandis que B est créé dynamiquement en utilisant Javascript. Visuellement, nous voulons que B soit la largeur exacte de A. Sous l'ancien modèle IE Box, c'est trivial. Nous disons simplement:, B.style.width = A.style.widthou même B.style.width = A.offsetWidth + "px".

Mais avec le modèle de boîte W3C, ce n'est pas si simple. Maintenant, nous devons également nous soucier des feuilles de style. Si B a la même classe CSS que A, nous pouvons simplement dire B.style.width = A.style.width. Mais si ce n'est pas le cas - et nous ne le voulons peut-être pas pour des raisons esthétiques - nous sommes en difficulté. Maintenant, nous devons prendre en compte le nombre total de pixels dans la bordure et le remplissage de A et B. Cela peut être particulièrement difficile si la bordure et le remplissage sont spécifiés dans des unités incohérentes (un phénomène courant car la bordure est souvent une ligne 1px, tandis que le remplissage peut être spécifié en ems). Ensuite, nous sommes confrontés à la tâche quasi impossible de convertir en une unité commune (em en px ou px en em). Tout cela juste pour que deux divisions s'alignent exactement à l'écran.

Donc, fondamentalement, le modèle de boîte W3C nous oblige à prendre en compte les problèmes de bordure CSS et de remplissage lorsque nous définissons la taille d'un élément, contrairement au modèle de boîte IE, car la largeur mesure la taille entière de la boîte (de fin à -fin), plutôt que le contenu de la boîte. Cela facilite considérablement la taille dynamique des éléments les uns par rapport aux autres.

Tout cela semble être une raison assez puissante pour favoriser le modèle box IE sur le modèle W3C (au moins conceptuellement - bien sûr, dans la pratique, le modèle box IE est mort).

Question : Pourquoi le W3C a-t-il choisi ce modèle de boîte? Y a-t-il des avantages du modèle de boîtier W3C que je ne vois tout simplement pas? Ou est-ce que j'exagère simplement le problème ici?

Le choix d'inclure ou non le remplissage et la bordure dans la largeur était arbitraire. La seule chose qui importait était de créer des dispositions multi-colonnes. Cependant, vous devez de toute façon tenir compte du fait que les gens utilisaient des tableaux pour les mises en page à ce moment-là. Donc, pour eux, cette préoccupation ne semblait pas assez importante et ils ont estimé que pouvoir spécifier la largeur exacte que le contenu lui-même occuperait en CSS semblait beaucoup plus précieux.

Pour les développeurs d'aujourd'hui, la situation semble totalement différente car ils utilisent CSS pour les mises en page et doivent faire face au modèle de boxe CSS. Heureusement, nous avons la possibilité de remplacer les règles de boxe. Dans la plupart des cas, une règle simple en haut de votre feuille de style fonctionne à merveille:

* {
    -mox-box-sizing: border-box;
    box-sizing: border-box;
}

Pour citer Jeff Kaufman à ce sujet :

Étant donné que la spécification l'a définie dans l'autre sens, cependant, le signal qu'elle aurait envoyé à Microsoft pour adopter leur mauvaise interprétation aurait été mauvais pour le Web. Microsoft utilisait déjà une approche d'embrassement, d'extension et d'extinction, où ils fabriquaient intentionnellement des produits qui agissaient différemment des concurrents afin de verrouiller les utilisateurs dans les versions de Microsoft. Ils ont failli réussir sur le Web: d’environ 2000 à 2005, IE était si populaire que de nombreux sites ont été conçus spécialement pour lui. L'adoption de l'approche d'IE ici aurait alors dit à Microsoft "que vous pouvez faire tout ce que vous voulez avec IE et nous ajusterons les normes pour la rendre légale".

Le modèle de boîte a donc été victime de conflits de pouvoir entre le W3C et Microsoft.