O Modelo da Caixa: Internet Explorer vs. W3C

Hoje, o problema do modelo de caixa do Internet Explorer não é um problema. A maioria dos desenvolvedores da Web coloca uma <!DOCTYPE>marca para impor a conformidade com os padrões e ninguém mais se importa em dar suporte ao Internet Explorer 5.5.

No entanto, alguns desenvolvedores apresentaram argumentos conceituais subjetivos em defesa do modelo de caixa do IE. Eles alegaram que o modelo de caixa do IE é mais "intuitivo" que o modelo W3C, porque o modelo W3C mede o conteúdo da caixa, enquanto o modelo IE mede a própria caixa:

Eu posso ver o ponto de vista deles, mas é basicamente um argumento subjetivo, e o mais importante é a conformidade com os padrões .

No entanto, recentemente passei a preferir o modelo de caixa do IE por razões práticas sérias . O modelo de caixa do W3C dificulta o redimensionamento dinâmico de um elemento para a largura exata de pixel na tela de outro elemento. O motivo é que a style.widthpropriedade de um elemento não leva em consideração o tamanho total da tela do elemento: você também precisa levar em consideração qualquer borda e preenchimento adicionais. Isso não é um problema se os dois elementos usarem a mesma classe CSS - mas se eles tiverem classes CSS diferentes , isso pode se tornar incrivelmente desafiador.

Suponha que tenhamos duas divs: A e B. A é codificada no html como uma div de 400px, enquanto B é criado dinamicamente usando Javascript. Visualmente, queremos que B tenha a largura exata de A. No modelo antigo do IE Box, isso é trivial. Simplesmente dizemos:, B.style.width = A.style.widthou mesmo B.style.width = A.offsetWidth + "px".

Mas com o modelo de caixa W3C, isso não é tão simples. Agora também precisamos nos preocupar com folhas de estilo. Se B tem a mesma classe CSS que A, podemos apenas dizer B.style.width = A.style.width. Mas se não - e talvez não desejemos por razões estéticas - estamos com problemas. Agora, precisamos levar em consideração o total de pixels na borda e no preenchimento de A e B. Isso pode ser particularmente difícil se a borda e o preenchimento forem especificados em unidades inconsistentes (uma ocorrência comum, já que a borda geralmente é uma linha de 1 px, enquanto o preenchimento pode ser especificado em ems). Em seguida, somos confrontados com a tarefa quase impossível de converter em uma unidade comum (em para px ou px para em). Tudo isso apenas para obter duas divs para alinhar exatamente na tela.

Então, basicamente, o modelo de caixa do W3C nos obriga a levar em consideração os problemas de borda e preenchimento de CSS quando definimos o tamanho de um elemento, enquanto o modelo de caixa do IE não, uma vez que a largura mede o tamanho inteiro da caixa (de ponta a ponta). -end), em vez do conteúdo da caixa. Isso facilita muito o dimensionamento dinâmico de elementos em relação um ao outro.

Tudo isso parece ser uma razão bastante poderosa para favorecer o modelo de caixa do IE sobre o modelo W3C (pelo menos conceitualmente - é claro que na prática o modelo de caixa do IE está morto).

Pergunta : Por que o W3C escolheu este modelo de caixa? Existem algumas vantagens do modelo de caixa W3C que simplesmente não estou vendo? Ou estou simplesmente exagerando o problema aqui?

A escolha de incluir preenchimento e borda na largura ou não foi arbitrária. A única coisa que importava era criar layouts de várias colunas. No entanto, você deve levar em consideração o fato de que as pessoas usavam tabelas para layouts naquele momento. Então, para eles, essa preocupação não parecia importante o suficiente e eles consideraram que ser capaz de especificar a largura exata que o próprio conteúdo ocuparia no CSS parecia muito mais valioso.

Para os desenvolvedores de hoje, a situação parece totalmente diferente, pois eles usam CSS para layouts e precisam lidar com o modelo de boxe CSS. Felizmente, temos a capacidade de substituir as regras de boxe; portanto, na maioria dos casos, a regra simples na parte superior da folha de estilo funciona fabulosamente:

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

Para citar Jeff Kaufman sobre o assunto :

Dado que as especificações o definiram de outra maneira, o sinal que teria enviado à Microsoft para adotar sua interpretação incorreta teria sido ruim para a web. A Microsoft já estava usando uma abordagem de abraçar, estender e extinguir, onde intencionalmente fabricavam produtos que agiam de maneira diferente da dos concorrentes para bloquear os usuários nas versões da Microsoft. Eles chegaram muito perto de ter sucesso com a web: de aproximadamente 2000 a 2005, o IE era tão popular que muitos sites projetados apenas para ele. A adoção da abordagem do IE aqui pode ter dito à Microsoft "você pode fazer o que quiser com o IE e ajustaremos os padrões para torná-lo legal".

Portanto, o modelo de caixa foi vítima de uma disputa de poder entre o W3C e a Microsoft.