CSS3 realista: un modelo de caja ligeramente diferente con {box-sizing:border-box}

El modelo de caja clásico en CSS nunca ha sido el más intuitivo. Gracias a CSS3, ahora tenemos una alternativa a considerar: {box-sizing:border-box}. Este modelo tiene muchas ventajas, especialmente cuando se trata de diseños flexibles.

El modelo de caja clásica: {box-sizing: content-box}

Piensa en la vida real: si quieres saber las medidas de una caja en el mundo analógico, siempre te referirás a las dimensiones exteriores de esta caja. No medirás tales dimensiones sin padding y border 😉

En el mundo digital, especialmente en lo que respecta al modelo clásico de caja, las cosas son diferentes. Aquí, width solo define el ancho del área de contenido, mide para padding o border hay que añadir. Visualmente, este modelo se ve así (en caso de que lo hayas olvidado):

Se necesitan ajustes y cálculos para encajar todo en su lugar. En diseños con anchos de píxeles fijos, esto es molesto, pero se puede lograr.

HTML al cuadrado como recurso provisional

Surgen dificultades, problemas reales, cuando las medidas para width, padding, border o margin se definen utilizando diferentes unidades. Si se hace de esta manera, el ancho exterior de nuestra caja no se puede calcular de forma fiable:

• Una columna de diseño creada con <aside class="sidebar"> se desea recibir un width del 20% y un paddingtanto a la izquierda como a la derecha de 10px cada uno.
• Pregunta: ¿Cuánto espacio necesitamos reservar para la barra lateral en nuestro diseño?
• Respuesta: Ni idea. Esto no es confiablemente computable.

Para que los diseños flexibles no se vuelvan tan confiables como su lotería favorita, encontramos una solución, en la que duplicamos el elemento HTML y distribuimos las propiedades del modelo de caja entre ambos elementos:

• En el interior aside ponemos un adicional div.
• aside se declara width:20%.
• El interior div está equipado con valores opcionales para padding, border o margin.

De esa manera, la barra lateral no está influenciada por padding y otros valores. Permanecerá en un ancho del 20% pase lo que pase y es calculable una vez más.

Esta duplicación de elementos HTML se ha vuelto tan común en estos días, que casi olvidamos el hecho de que esto es solo un recurso provisional e intencionalmente pensado como tal.

Cajas realistas con CSS3: {box-sizing: border-box}

Casi oculto a la vista del público, los navegadores comenzaron a admitir otro, un segundo modelo de caja, con un modo de operación ligeramente diferente. En este modelo, padding y border ya están incluidos en el valor dado por width. Responde al nombre de border-boxya que su ancho se calcula a partir de border para border. Así es como se ve:

En la vida cotidiana de un diseñador web, este cambio de ratón en el diseño es muy útil. Mirando hacia atrás en nuestro ejemplo de la barra lateral, podemos guardar fácilmente el elemento HTML interno doble:

• Empezamos con la definición .sidebar { box-sizing:border-box}.
• Luego, por ejemplo, agregamos un width:20% y algunos al azar padding o border al elemento.

Acabado.

Utilizando border-box no tenemos que preocuparnos por cuánto padding o border obtiene un elemento, ya que estos valores simplemente se restan del ancho total y no se le suman. Esto resulta razonable en casi todos los casos imaginables. O la barra lateral es calculable sin necesidad de duplicar elementos.

Por cierto: si agregas un exterior marginesto aún tendrá que agregarse al valor, lo que tampoco hace ninguna diferencia en las cajas realistas.

Él border-box en uso diario

Una vez que hayas entendido todo el valor práctico de border-box, te harás con ansiedad la inevitable pregunta de cómo lo admiten los navegadores. Esta es la respuesta:

Oye, oye, incluso IE8 entiende eso. Increíble. Sin embargo, Mozilla necesita un prefijo, pero quien pueda omitir IE7, podría comenzar la hoja de estilo con lo siguiente:

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

Esto es exactamente lo que Paul Irish recomienda en su publicación de blog de febrero de 2012.

Conclusión

border-box es más que una buena alternativa al modelo de caja clásico, pero antes de cambiar sus tácticas de codificación de un solo golpe a border-box, asegúrese de leer los artículos a continuación. Predigo que, para diseños receptivos, border-box se hará evidente más temprano que tarde.

Enlaces relacionados:

Como puedes ver, este tema no es precisamente nuevo, pero se ha venido discutiendo a lo largo de los últimos años. Los siguientes artículos muestran la evolución desde los primeros intentos hasta la recomendación:

• pablo irlandés, * {cuadro de borde} FTW (febrero de 2012)
• Roger Johansson, Controlando el ancho con CSS3 box-sizing (abril de 2011)
• Chris Coyier, Tamaño de caja (septiembre de 2010)
• dirk jesse, CSS – Alles wird gut? (diciembre de 2006)

Y ahora algunas referencias: * W3C, Tamaño de caja CSS3-ui
* Red de desarrolladores de Mozilla, tamaño de caja

[photo credits wooden box: 16 Miles of String via photopin cc]

Artículo originalmente escrito por Peter Muller para nuestro alemán Revista Dr. Web

(dpe)