En el desarrollo web , el modelo de caja CSS se refiere a cómo se modelan los elementos HTML en los motores de los navegadores y cómo la dimensión de esos elementos HTML se deriva de las propiedades CSS . Es un concepto fundamental para la composición de páginas web HTML . [3] Las pautas del modelo de caja están descritas por los estándares web del Consorcio World Wide Web (W3C), específicamente el Grupo de Trabajo CSS. Durante gran parte de finales de la década de 1990 y principios de la de 2000, hubo implementaciones no compatibles con el modelo de caja en los navegadores convencionales. Con la llegada de CSS2 en 1998, que introdujo la box-sizing
propiedad, el problema se había resuelto en su mayor parte.
Módulo de modelo de caja CSS Nivel 3 | |
Nombre nativo | Módulo de modelo de caja CSS Nivel 3 |
---|---|
Estado | Instantánea de recomendación de candidatos del W3C |
Ultima versión | Nivel 3 22 de diciembre de 2020 [1] |
Organización | Consorcio Mundial de la red |
Comité | Grupo de trabajo CSS |
Editores | |
Estándares básicos | CSS |
Dominio | CSS |
Sitio web | www |
Detalles específicos
La especificación de hojas de estilo en cascada (CSS) describe cómo los navegadores gráficos muestran los elementos de las páginas web . La sección 4 de la especificación CSS1 define un "modelo de formato" que proporciona elementos a nivel de bloque, como p
y, blockquote
un ancho y alto, y tres niveles de cuadros que lo rodean: relleno, bordes y márgenes. [4] Si bien la especificación nunca usa el término "modelo de caja" explícitamente, el término se ha vuelto ampliamente utilizado por los desarrolladores web y los proveedores de navegadores web.
Todos los elementos HTML pueden considerarse "cajas", esto incluye div
etiqueta, p
etiqueta o a
etiqueta. Cada una de esas cajas tiene cinco dimensiones modificables:
- el
height
ywidth
describir las dimensiones del contenido real de la caja (texto, imágenes, ...) - la
padding
describe el espacio entre el contenido y el borde del cuadro - el
border
es cualquier tipo de línea (sólida, punteada, discontinua ...) que rodea el cuadro, si está presente - el
margin
es el espacio alrededor del borde
- el
De acuerdo con la especificación CSS1, lanzada por W3C en 1996 y revisada en 1999, cuando se especifica explícitamente un ancho o alto para cualquier elemento a nivel de bloque, debe determinar solo el ancho o alto del elemento visible, con el relleno, los bordes, y los márgenes aplicados posteriormente. [4] [5] Antes de CSS3, este modelo de caja se conocía como modelo de caja W3C , en CSS3 se conoce como content-box
.
Por tanto, el ancho total de una caja es left-margin
+ left-border
+ left-padding
+ width
+ right-padding
+ right-border
+ right-margin
. Del mismo modo, la altura total de una caja es igual a top-margin
+ top-border
+ top-padding
+ height
+ bottom-padding
+ bottom-border
+ bottom-margin
.
Por ejemplo, el siguiente código CSS
. myClass { ancho : 200 px ; altura : 100 px ; relleno : 10 px ; borde : negro sólido de 10 px ; margen : 10 px ; }
especificaría las dimensiones de la caja de cada bloque perteneciente a 'myClass'. Además, cada una de estas cajas tendrá una altura total de 160 px y una anchura de 260 px .
CSS3 introdujo el modelo de caja de Internet Explorer en el estándar, conocido como border-box
. [6]
Historia
Antes de HTML 4 y CSS, muy pocos elementos HTML admitían tanto el borde como el relleno, por lo que la definición del ancho y alto de un elemento no era muy polémica. Sin embargo, varió según el elemento. El atributo de ancho HTML de una tabla define el ancho de la tabla, incluido su borde. [7] Por otro lado, el atributo de ancho HTML de una imagen define el ancho de la imagen en sí (dentro de cualquier borde). [8] El único elemento que apoyaba el relleno en esos primeros días era la celda de la tabla. El ancho de la celda se definió como "el ancho sugerido para el contenido de una celda en píxeles, excluyendo el relleno de la celda". [9]
En 1996, CSS [10] introdujo márgenes, bordes y relleno para muchos más elementos. Adoptó un ancho de definición en relación con el contenido, el borde, el margen y el relleno similar al de una celda de tabla. [11] Desde entonces, esto se conoce como el modelo de caja W3C .
En ese momento, muy pocos proveedores de navegadores implementaron el modelo de caja W3C al pie de la letra. Los dos principales navegadores de la época, Netscape 4.0 e Internet Explorer 4.0, definían el ancho y el alto como la distancia de un borde a otro. [12] Esto se ha denominado modelo tradicional [13] o de caja de Internet Explorer . [14]
Internet Explorer en " modo peculiaridades " incluye el contenido, el relleno y los bordes dentro de un ancho o alto especificado; esto da como resultado una representación más estrecha o más corta de una caja que la que resultaría siguiendo el comportamiento estándar. [15]
El comportamiento del modelo de caja de Internet Explorer a menudo se consideraba un error, debido a la forma en que las versiones anteriores de Internet Explorer manejaban el modelo de caja o el tamaño de los elementos en una página web, que difiere de la forma estándar recomendada por el W3C para el estilo en cascada. Lenguaje de hojas . [16] [17] A partir de Internet Explorer 6 , el navegador admite un modo de representación alternativo (llamado "modo compatible con los estándares") que resuelve esta discrepancia. Sin embargo, por razones de compatibilidad con versiones anteriores, todas las versiones aún se comportan de la forma habitual, no estándar por defecto (ver modo peculiaridades ). Internet Explorer para Mac no se ve afectado por este comportamiento no estándar.
Soluciones alternativas
Las versiones 6 y posteriores de Internet Explorer no se ven afectadas por el error si la página contiene determinadas declaraciones de tipo de documento HTML . Estas versiones mantienen el comportamiento de errores cuando están en modo peculiar por razones de compatibilidad con versiones anteriores. [18] Por ejemplo, se activa el modo peculiaridades:
- Cuando la declaración del tipo de documento está ausente o incompleta;
- Cuando se encuentra un documento HTML 3 o anterior;
- Cuando se utiliza una declaración de tipo de documento HTML 4.0 Transitional o Frameset y no hay un identificador de sistema (URI);
- Cuando aparece un comentario SGML u otro contenido no reconocido antes de la declaración del tipo de documento
- Internet Explorer 6 también utiliza el modo peculiaridades si hay una declaración XML antes de la declaración del tipo de documento. [19]
Se han ideado varias soluciones para obligar a las versiones 5 y anteriores de Internet Explorer a mostrar páginas web utilizando el modelo de caja W3C. Estas soluciones alternativas generalmente aprovechan errores no relacionados en el procesamiento del selector de CSS de Internet Explorer para ocultar ciertas reglas del navegador. La más conocida de estas soluciones es el "truco del modelo de caja" desarrollado por Tantek Çelik , un ex empleado de Microsoft que desarrolló esta idea mientras trabajaba en Internet Explorer para Macintosh. Implica especificar una declaración de ancho para Internet Explorer para Windows y luego anularla con otra declaración de ancho para navegadores compatibles con CSS. Esta segunda declaración se oculta de Internet Explorer para Windows explotando otros errores en la forma en que analiza las reglas CSS. La implementación de estos "hacks" de CSS se ha complicado aún más con el lanzamiento público de Internet Explorer 7, que ha solucionado algunos problemas, pero no otros, lo que ha provocado resultados no deseados en las páginas que utilizan estos hacks. [18]
Los hacks de modelos de cajas han demostrado ser poco fiables porque se basan en errores en el soporte CSS de los navegadores que pueden corregirse en versiones posteriores. Por esta razón, algunos desarrolladores web han recomendado evitar especificar tanto el ancho como el relleno para el mismo elemento o usar comentarios condicionales y / o filtros CSS para solucionar el error del modelo de caja en versiones anteriores de Internet Explorer. [14] [20]
Soporte para el modelo de caja de Internet Explorer
El diseñador web Doug Bowman ha dicho que el modelo de caja de Internet Explorer original representa un enfoque mejor y más lógico. [21] Peter-Paul Koch da el ejemplo de una caja física, cuyas dimensiones siempre se refieren a la caja misma, incluido el relleno potencial, pero nunca a su contenido. [13] Dice que este modelo de caja es más útil para los diseñadores gráficos, que crean diseños basados en el ancho visible de las cajas en lugar del ancho de su contenido. [22] Bernie Zimmermann dice que el modelo de caja de Internet Explorer está más cerca de la definición de dimensiones de celda y relleno que se usa en el modelo de tabla HTML. [23]
El W3C ha incluido una propiedad de "tamaño de caja" en CSS3. Cuando box-sizing: border-box;
se especifica para un elemento, cualquier relleno o borde del elemento se dibuja dentro del ancho y alto especificado, "como comúnmente implementan los agentes de usuario HTML heredados". [24] Internet Explorer 8 , navegadores WebKit como Apple Safari 5.1+ y Google Chrome , navegadores basados en Gecko como Mozilla Firefox 29.0 y posterior, Opera 7.0 y posterior y Konqueror 3.3.2 y posterior admiten la propiedad de tamaño de caja CSS3 . Los navegadores Gecko anteriores a 29.0 admiten la misma funcionalidad utilizando la -moz-box-sizing
propiedad específica del navegador . [25] border-box
es el modelo de caja predeterminado utilizado en el marco Bootstrap .
Referencias
- ↑ a b Etemad, Elika J., ed. (22 de diciembre de 2020). "Módulo de modelo de caja CSS Nivel 3" . W3C . Nivel 3. Grupo de trabajo CSS . Consultado el 9 de abril de 2021 .
- ^ a b Bos, Bert; Prowse, Anton, eds. (6 de julio de 2018). "CSS Basic Box Model Level 3" . W3C . 31 de julio de 2018. Grupo de trabajo CSS . Consultado el 9 de abril de 2021 .
- ^ "CSS" . Documentos web de MDN . 23 de marzo de 2019 . Consultado el 30 de marzo de 2019 .
- ^ a b Wium Lie, Håkon ; Bos, Bert (11 de enero de 1999). "Hojas de estilo en cascada, nivel 1 § Modelo de formato" . Consorcio World Wide Web . Consultado el 26 de octubre de 2017 .
- ^ Håkon Wium Lie ; Bert Bos (17 de diciembre de 1996). "Hojas de estilo en cascada, nivel 1" . Consorcio World Wide Web . Consultado el 9 de diciembre de 2006 .
- ^ Peter-Paul Koch (2013). "CSS - tamaño de caja" . quirksmode.org . Consultado el 30 de marzo de 2019 .
- ^ Raggett, Dave (23 de enero de 1996). "El modelo de tabla HTML3" . Consorcio World Wide Web . Consultado el 26 de octubre de 2017 ."Tablas HTML RFC 1942" . IETF .
El ancho predeterminado de la tabla es el espacio entre los márgenes derecho e izquierdo actuales.
- ^ Raggett, Dave; Le Hors, Arnaud; Jacobs, Ian (24 de diciembre de 1999). "13 Objetos, imágenes y applets § Ancho y alto" . Consorcio World Wide Web . Consultado el 26 de octubre de 2017 .
- ^ Raggett, Dave (14 de enero de 1997). "Especificación de referencia HTML 3.2" . Consorcio World Wide Web . Consultado el 26 de octubre de 2017 .
- ^ Wium Lie, Håkon ; Bos, Bert (17 de diciembre de 1996). "Hojas de estilo en cascada, nivel 1" . Consorcio World Wide Web . Consultado el 26 de octubre de 2017 .
- ^ Wium Lie, Håkon ; Bos, Bert (17 de diciembre de 1996). "Hojas de estilo en cascada, nivel 1" . Consorcio World Wide Web . Consultado el 26 de octubre de 2017 .
- ^ Koch, Peter-Paul. "Modificación del modelo de caja" . XS4ALL . Consultado el 26 de octubre de 2017 .
- ^ a b Koch, Peter-Paul. "CSS - tamaño de caja" . QuirksMode . Consultado el 26 de octubre de 2017 .
- ^ a b Johansson, Roger (21 de diciembre de 2006). "Internet Explorer y el modelo de caja CSS" . Calle Berea 456 . Consultado el 26 de octubre de 2017 .
- ^ Lance Silver (marzo de 2001). "Mejoras de CSS en Internet Explorer 6" . Red de desarrolladores de Microsoft . Microsoft . Consultado el 24 de junio de 2007 .
- ^ Shafer, Dan (2005). Utopía HTML: diseñar sin tablas usando CSS . Melbourne: Sitepoint . pp. 124 y Apéndice C . ISBN 0-9579218-2-9.
- ^ Shea, David ; Molly E. Holzschlag (2005). El zen del diseño CSS . Berkeley: Peachpit Press. ISBN 0-321-30347-4.
- ^ a b Markus Mielke (26 de septiembre de 2006). "Compatibilidad de hojas de estilo en cascada en Internet Explorer 7" . Red de desarrolladores de Microsoft . Microsoft . Consultado el 24 de junio de 2007 . "Las páginas creadas en modo no estricto (peculiaridades) no cambiarán el comportamiento en IE7 y no se verán afectadas por filtros CSS rotos. Las páginas creadas en modo no estricto (o" modo peculiaridades ") no cambiarán el comportamiento en IE7".
- ^ "! DOCTYPE" . Red de desarrolladores de Microsoft . Microsoft . Consultado el 13 de enero de 2007 . "Los siguientes ejemplos muestran cómo utilizar la declaración! DOCTYPE para especificar la DTD a la que se ajusta un documento y para cambiar Internet Explorer 6 y versiones posteriores al modo compatible con los estándares".
- ^ Arve Bersvendsen (febrero de 2004). "CSS libre de hackeo para IE" . Weblog de Arve Bersvendsen . Archivado desde el original el 15 de enero de 2007 . Consultado el 16 de enero de 2007 .
- ^ "Vorsprung durch Webstandards | Douglas Bowman declara su amor por CSS" . Vorsprungdurchwebstandards.de. Archivado desde el original el 14 de junio de 2010 . Consultado el 7 de julio de 2010 .
- ^ "Vorsprung durch Webstandards | Peter-Paul Koch declara su amor a CSS" . Vorsprungdurchwebstandards.de. Archivado desde el original el 27 de febrero de 2010 . Consultado el 7 de julio de 2010 .
- ^ "Ilustración del modelo de caja, Bernie Zimmermann" . Bernzilla.com. 4 de abril de 2003. Archivado desde el original el 27 de diciembre de 2010 . Consultado el 7 de julio de 2010 .
- ^ "Módulo de interfaz de usuario básico CSS3" . Consorcio World Wide Web .
- ^ "-moz-box-sizing" . Centro de desarrolladores de Mozilla . Mozilla . 11 de abril de 2009 . Consultado el 11 de abril de 2009 .
Es posible utilizar esta propiedad para emular el comportamiento de los navegadores que no admiten correctamente la especificación del modelo de caja CSS.
enlaces externos
- La especificación del World Wide Web Consortium (W3C) del modelo de caja
- Un tutorial sobre el modelo de caja CSS
- Descripción de Tantek Çelik del "truco del modelo de caja"
- Hacer que Internet Explorer funcione bien con CSS : artículo en about.com que describe varias formas de solucionar el problema del modelo de caja y otros errores de IE.
- Compatibilidad de hojas de estilo en cascada en Internet Explorer 7 : artículo de MSDN, julio de 2006.
- Diferencias del modelo de caja CSS en Firefox e Internet Explorer : explicación adicional de las diferencias de representación entre Mozilla Firefox e Internet Explorer.