El modelo de caja: Internet Explorer vs. W3C

Hoy en día, el problema del modelo de caja de Internet Explorer no es un problema. La mayoría de los desarrolladores web colocan una <!DOCTYPE>etiqueta para exigir el cumplimiento de los estándares, y ya a nadie le importa realmente soportar Internet Explorer 5.5.

Sin embargo, algunos desarrolladores han presentado argumentos subjetivos y conceptuales en defensa del modelo de caja de IE. Afirmaron que el modelo de caja IE es más "intuitivo" que el modelo W3C, porque el modelo W3C mide el contenido de la caja, mientras que el modelo IE mide la caja misma:

Puedo ver su punto de vista, pero es básicamente un argumento subjetivo, y lo más importante es el cumplimiento de las normas.

Sin embargo, recientemente he llegado a preferir el modelo de caja IE por razones prácticas serias . El modelo de caja W3C dificulta el cambio dinámico del tamaño de un elemento al ancho exacto de píxeles en pantalla de otro elemento. La razón es que la style.widthpropiedad de un elemento no tiene en cuenta el tamaño total en pantalla del elemento: también debe tener en cuenta cualquier borde y relleno adicionales. Esto no es un problema si ambos elementos usan la misma clase CSS, pero si tienen diferentes clases CSS, esto puede ser increíblemente desafiante.

Supongamos que tenemos dos divs: A y B. A está codificado en el html como un div de 400px, mientras que B se crea dinámicamente usando Javascript. Visualmente, queremos que B sea el ancho exacto de A. Según el antiguo modelo de IE Box, esto es trivial. Simplemente decimos: B.style.width = A.style.widtho incluso B.style.width = A.offsetWidth + "px".

Pero con el modelo de caja W3C, esto no es tan simple. Ahora también tenemos que preocuparnos por las hojas de estilo. Si B tiene la misma clase CSS que A, solo podemos decir B.style.width = A.style.width. Pero si no es así, y es posible que no lo deseemos por razones estéticas, estamos en problemas. Ahora tenemos que tener en cuenta el total de píxeles en el borde y el relleno de A y B. Esto puede ser particularmente difícil si el borde y el relleno se especifican en unidades inconsistentes (una ocurrencia común ya que el borde es a menudo una línea de 1 px, mientras que el relleno podría especificarse en ems). Luego nos enfrentamos con la tarea casi imposible de convertir a una unidad común (em a px o px a em). Todo esto solo para que dos divs se alineen exactamente en la pantalla.

Básicamente, el modelo de caja W3C nos obliga a tener en cuenta los problemas de borde y relleno de CSS cuando establecemos el tamaño de un elemento, mientras que el modelo de caja IE no lo hace, ya que el ancho mide todo el tamaño de la caja (de extremo a -end), en lugar del contenido de la caja. Esto hace que sea mucho más fácil dimensionar elementos dinámicamente en relación entre sí.

Todo esto parece una razón bastante poderosa para favorecer el modelo de caja IE sobre el modelo W3C (al menos conceptualmente, por supuesto, en la práctica, el modelo de caja IE está muerto).

Pregunta : ¿Por qué el W3C eligió este modelo de caja? ¿Hay algunas ventajas del modelo de caja W3C que simplemente no estoy viendo? ¿O simplemente estoy exagerando el problema aquí?

La elección de incluir relleno y borde en el ancho o no fue arbitraria. Lo único que importaba era construir diseños de varias columnas. Sin embargo, debe tener en cuenta el hecho de que las personas usaban tablas para diseños en ese momento de todos modos. Entonces, para ellos, esa preocupación no parecía lo suficientemente importante y consideraron que poder especificar el ancho exacto que ocuparía el contenido en CSS parecía mucho más valioso.

Para los desarrolladores de hoy, la situación parece totalmente diferente, ya que usan CSS para diseños y tienen que lidiar con el modelo de boxeo CSS. Afortunadamente, tenemos la capacidad de anular las reglas de boxeo, por lo que en la mayoría de los casos, una regla simple en la parte superior de su hoja de estilo funciona fabulosamente:

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

Para citar a Jeff Kaufman sobre el tema :

Sin embargo, dado que la especificación lo definió de otra manera, la señal que habría enviado a Microsoft para adoptar su mala interpretación habría sido mala para la web. Microsoft ya estaba utilizando un enfoque de aceptación, extensión y extinción, donde intencionalmente fabricaban productos que actuaban de manera diferente a los de la competencia para bloquear a los usuarios en las versiones de Microsoft. Estuvieron muy cerca de tener éxito con la web: desde aproximadamente 2000 hasta 2005, IE fue tan popular que muchos sitios diseñados solo para ello. Adoptar el enfoque de IE aquí podría haberle dicho a Microsoft "puedes hacer lo que quieras con IE y ajustaremos los estándares para hacerlo legal".

Entonces, el modelo de caja fue víctima de una lucha de poder entre W3C y Microsoft.