18

2

Cálculos en el CSS con calc() de CSS3

Las medidas relativas en CSS pueden darnos más de un dolor de cabeza, por ejemplo usar porcentajes y márgenes puede llevar a que no se visualice bien ciertos elementos, por ese motivo existe calc(), una función de CSS3 con la que podemos realizar cálculos con medidas, es decir: sumas, restas, multiplicaciones y divisiones mezclando porcentajes, píxeles o cualquier unidad.
Además, es compatible con todos los navegadores modernos de escritorio (incluido Internet Explorer 9, por raro que parezca).

En el ejemplo los tres bloques tienen el mismo margen de 15px y tienen distintos anchos, al tener un ancho (width) del 100% coge el tamaño del elemento que lo contiene (el bordeado).
No sería un problema tener un ancho del 100% si no fuese por el margen, que se aplica tras adquirir el ancho y hace que la figura sobresalga del elemento que lo contiene.
Para solucionar este problema podemos usar la función calc() de CSS3 y restarle al 100% los márgenes.

1. /* Forma estándar de calc() */
2. width: calc([Cálculos]);
4. /* Forma según navegadores de calc() */
5. width: -webkit-calc([Cálculos]);
6. width: -moz-calc([Cálculos]);

Distintos cálculos

Empezaremos viendo los distintos cálculos que podemos hacer, que son los básicos (sumas, restas, multiplicaciones y divisiones).
En los siguientes ejemplos modificaremos su ancho con la función calc() que hay en su interior.

1. /* Ancho de los cuatro ejemplos anteriores */
2. width: calc(50px * 2);
3. width: calc(200px / 2);
4. width: calc(40px + 40px);
5. width: calc(200px - 80px);

Pero también se pueden hacer cosas más complejas, por ejemplo, si queremos tener varios bloques y queremos disponerlos de lado podemos dividir el espacio que tienen, entre el número de bloques y restarles los márgenes.
Un ejemplo sería tener 3 bloques, con un margen de 15px, que para llegar al tamaño exacto para poderlos poner de lado deberíamos de hacer el siguiente cálculo.

1. width: calc((100% / 3) - 30px);

El cálculo es el resultado de dividir el 100% del espacio que disponen entre tres, y restarle el margen que tiene cada bloque en cada lado (15px por lado son 30px), podéis comprobar que mantiene su proporción pasando por encima del bloque.

Distintas unidades

Hasta ahora hemos usado las unidades más básicas, pero podemos usar unidades como em o pt (por destacar dos, aunque hay muchas más), pero sobre todo con em podemos tener un correcto control del texto.
Por ejemplo, si queremos establecer que el alto de una línea de texto (line-height) sea 3px superior a el tamaño de la fuente solo debemos de usar el siguiente cálculo.

1. line-height: calc(1em + 3px);

Resumen

Podría poneros muchísimos ejemplos distintos, pero esto es lo básico para saber ponerlo en marcha, la función calc() de CSS3 nos da unas posibilidades enormes y un dinamismo que solo se podía conseguir con JavaScript o con elementos estáticos.
Pero con esta función podremos ajustar todo de forma relativa al tamaño de la letra o al contenedor de un elemento, y se podrá reajustar aunque cambien esos tamaños.