El box-sizing La propiedad puede hacer que la creación de diseños CSS sea más fácil y mucho más intuitiva. Es una bendición para los desarrolladores que aquí en Programar Pluscelebramos el Día Internacional de Concienciación sobre el Tamaño de las Cajas en febrero.
Pero, ¿cómo es que es tan útil y querido que se merece sus propias vacaciones en Internet? Es hora de un poco de historia de CSS.
Historial del modelo de caja
Desde los albores de CSS, el modelo de caja ha funcionado así por defecto:
ancho + relleno + borde = ancho real visible / renderizado de la caja de un elemento
altura + relleno + borde = altura real visible / renderizada de la caja de un elemento
Esto puede ser un poco contrario a la intuición, ya que el ancho y el alto que estableces para un elemento desaparecen por la ventana tan pronto como comienzas a agregar relleno y bordes al elemento.
En los viejos tiempos del diseño web, las primeras versiones de Internet Explorer (
El cuadro de la parte superior muestra el modelo de cuadro predeterminado. El cuadro en la parte inferior muestra lo que alguna vez fue la interpretación del “modo peculiar” del modelo de cuadro.
Algunas personas prefirieron esta interpretación “peculiar” del modelo de caja y la consideraron más intuitiva. Es un punto válido. Tener el ancho visible real de una caja resulta diferente de lo que declaraste en el CSS es un poco complicado.
Pero, en los días del diseño de ancho fijo, no era particularmente complicado trabajar con el modelo de caja predeterminado una vez que lo entendía. Puede hacer un poco de aritmética para averiguar cuántos píxeles necesita recortar del ancho o alto declarado de un elemento para acomodar su relleno y borde. El problema para los desarrolladores actuales es que esas longitudes absolutas de píxeles no se traducen en un diseño receptivo, por lo que ya no se aplican las mismas matemáticas.
A medida que el diseño receptivo (o, como se conocía alguna vez, el diseño “fluido” o “líquido”) comenzó a ganar popularidad, los desarrolladores y diseñadores deseaban una actualización del modelo de caja. El gran diseñador Jon Hicks, conocido por sus excelentes diseños de ancho fluido, dijo lo siguiente sobre el tema en la lista de deseos de CSS que reunimos en 2008:
¡Me encantaría un modelo de caja diferente! Me parece extraño que el relleno y el borde agreguen el ancho de un objeto, y me encantaría poder dar algo como un área de texto con un ancho del 100% y un relleno de 3px sin preocuparme de lo que hará el diseño. ¿Quizás algo así como rellenar el interior como un nuevo selector?
En ese sentido, también me gustaría poder especificar un ancho del 100% para un elemento, menos un ancho fijo establecido. Nuevamente, ¡muy útil al crear diseños fluidos con elementos de forma!
En la actualidad box-sizing
Esos deseos fueron concedidos cuando el box-sizing La propiedad se introdujo en CSS3. Sin embargo box-sizing tiene tres valores posibles (content-box, padding-box, y border-box), el valor más popular es border-box.
Hoy en día, las versiones actuales de todos los navegadores utilizan el modelo de cuadro original “ancho o alto + relleno + borde = ancho o alto real”. Con box-sizing: border-box;, podemos cambiar el modelo de caja a lo que alguna vez fue la forma “peculiar”, donde el ancho y la altura especificados de un elemento no se ven afectados por el relleno o los bordes. Esto ha demostrado ser tan útil en el diseño receptivo que se ha abierto camino en los estilos de reinicio.
En este punto, es posible que se pregunte: “¿Es posible que Old IE haya hecho algo bien?” Mucha gente piensa que sí.
Manifestación
Esta demostración muestra cómo border-box puede ayudar a que los diseños receptivos sean más manejables. El padre divEl ancho es del 50% y tiene 3 elementos secundarios con diferentes anchos, relleno y márgenes. Haga clic en el border-box para colocar a todos los hijos en el lugar correcto dentro del padre.
Vea la demostración de diseño de tamaño de caja de lápiz por Programar Plus(@ css-tricks) en CodePen.
Bueno, mejor y (probablemente) mejor box-sizing Métodos de reinicio
El viejo” border-box Reiniciar
Lo más temprano box-sizing: border-box; restablecer se veía así:
* {
box-sizing: border-box;
}Esto funciona bastante bien, pero omite los pseudo elementos, que pueden dar lugar a algunos resultados inesperados. Rápidamente surgió un reinicio revisado que cubre pseudo elementos:
Dimensionamiento de caja universal
*, *:before, *:after {
box-sizing: border-box;
}Este método seleccionó también pseudo elementos, mejorando el efecto normalizador de border-box. Pero el * El selector dificulta el uso de los desarrolladores. content-box o padding-box en otras partes del CSS. Lo que nos lleva al líder actual de las mejores prácticas:
Dimensionamiento de caja universal con herencia
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}Este restablecimiento le brinda más flexibilidad que sus predecesores; puede usar content-box o padding-box (donde sea compatible) a voluntad, sin preocuparse de que un selector universal anule su CSS. Entramos en más profundidad en esta técnica y el razonamiento detrás de ella en “Heredar box-sizing Probablemente mejores prácticas ligeramente mejores ”. Una posible queja es que box-sizing normalmente no se hereda, por lo que es un comportamiento especializado, no lo mismo que algo que normalmente pondrías en un reinicio.
Prefijos de proveedores
Todos los navegadores actuales admiten box-sizing: border-box; sin prefijos, por lo que la necesidad de prefijos de proveedores se está desvaneciendo. Pero, si necesita admitir versiones anteriores de Safari (-webkit y -moz, como esto:
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}Problemas conocidos
box-sizing: border-box; es compatible con las versiones actuales de los principales navegadores. El menos utilizado padding-box solo es compatible con Firefox por el momento. Hay información más completa sobre la compatibilidad del navegador en nuestro box-sizing entrada de almanaque.
Hay algunos problemas con las versiones anteriores de Internet Explorer (8 y anteriores). IE 8 no reconoce border-box en elementos con min/max-width o min/max-height (esto solía afectar a Firefox también, pero se corrigió en 2012). IE 7 y anteriores no reconocen box-sizing en absoluto, pero hay un polyfill que puede ayudar.