Ultima revisión 30/04/2013

Responsive Design: calc y la propiedad box-sizing de CSS3

Las nuevas versiones de los navegadores traen un hermoso regalo referente al CSS3. Hoy os voy a comentar la función calc, la cual, nos permite de forma sencilla gestionar el ancho y alto de los elementos cuando, estos, tienen padding o margin.

Según la especificación W3C la función, básicamente, lo que permite es sustituir el valor fijo de cualquier dimensión que se aplica a una propiedad por una expresión de un cálculo matemático sencilla como sumas, restas, multipliaciones y / o divisiones. De esta manera, a través de esta función podemos escribir cosas como:

width:calc(100% - 10px);

Esta función no extrae los valores computados de los elementos sino que maneja valores específicos. La expresión dentro de la función representa el resultado del cálculo matemático utilizando las reglas de prioridad de toda la vida. Puede ser utilizado en términos de longitud, frecuencia, ángulos, tiempos o números.

Como sabemos, cuando ponemos 100% a un elemento y este tiene padding, margin o ambos, en realidad, se queda en un valor menor. Si además tiene borde establecido colocar los elementos puede ser una ardua tarea. Para eso se inventó la función calc, para que ajustar todos estos valores sea una tarea más fácil.

section {
    float: left;
    margin: 1em; border: solid 1px;
    width: calc(100%/3 - 2*1em - 2*1px);
}

Pero, para gesionar las propiedades border, padding y margin la W3C decidió incluir en CSS3, además, una propiedad que permite elegir el modelo de ajuste que se prefiera. Esta propiedad es box-sizing y sirve para indicar que el ancho de un elemento se altere si, este, tiene borde o padding activados. Se añadió porque la anchura del elemento, por defecto, no incluye borde ni padding. Sus valores ueden ser:

• content-box: Se le denomina modo aditivo ya que el contenido de un elemento, padding, margin y el tamaño de border se suman.
• border-box: Se le denomina modo sustractivo ya que el contenido de un elemento, padding, margin y el tamaño de border se restan.

section {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

Estableciendo esta propiedad a border-box podemos asegurar que los tamaños serán consistentes independientemente del ancho del elemento.