Logo de islavisual
Logo de islavisual IslaVisual
imagen de sección

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.

Sobre el autor

Pablo Enrique Fernández Casado

CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.

Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.