El lanzamiento de CSS3 nos trajo importantes y poderosas funciones, como es el caso de la función calc(). Con ella puedes especificar valores basándote en la aritmética, en lugar de utilizar simples números fijos.
El cálculo de valores es particularmente útil si queremos reproducir el mismo diseño en distintos navegadores y sobre todo, dispositivos. En este artículo vamos a aprender cómo utilizar esta función y sus compatibilidades, seguido de un sencillo ejemplo en el que veremos cómo construir un diseño responsive utilzando dicha función.
Introducción al cálculo en CSS3
Los operadores que tenemos a nuestra disposición en la función calc() creo que se explican por sí mismos. Son: el signo más, el signo menos, la barra inclinada y la cadena “mod” para los módulos. A continuación podrás ver unos cuantos ejemplos de estos operadores:
| Ejemplo | Nombre | Resultado |
| 25% + 5px | Suma | Suma el 25% y 5px |
| 2.5em - 5px | Resta | Diferencia entre 2.5em y 5px |
| 25% * 2 | Multiplicación | Producto del 25% y 2 |
| 25% / 2 | División | División del 25% y 2 |
Las ecuaciones de la función calc() se utilizan en lugar de los valores fijos, y pueden contener valores que utilicen distintas unidades (%, em, px, cm, etc) siempre y cuando sean del mismo tipo. En los ejemplos de antes, todos los cálculos se han basado en la longitud del selector.
Sintaxis
La función debe utilizarse en lugar de los valores fijos, mediante el formato calc(VALOR OPERADOR VALOR);. En el siguiente ejemplo añadimos unos cuantos píxeles al tamaño de texto por defecto, que como puedes ver es de 1 em.
span.textThreePlus {
font-size: calc(1em + 3px);
font-size: -moz-calc(1em + 3px);
font-size: -webkit-calc(1em + 3px);
}
También es posible agrupar expresiones en paréntesis, tal que así:
#footer {
height: calc((10% - 4px) / 2 + 3px);
}
Debes tener en cuenta que cada vez que proporcionas un valor negativo a una propiedad donde los valores negativos no son válidos (como es el caso de la propiedad width), el valor devuelto por defecto siempre será 0px.
Orden de operadores matemáticos
Después de ver el ejemplo anterior, es probable que sea un buen momento para repasar algo que aprendimos en la escuela, el orden de los operadores, o el orden en el que se calcularán tus expresiones.
- Primero, las expresiones entre paréntesis
- Después, las multiplicaciones, las divisiones y los mods, dependiendo del orden en el que aparezcan (ya sabes, de derecha a izquierda)
- Y por último, las sumas y las restas, dependiendo también del orden en el que aparezcan (ya sabes, de derecha a izquierda)
Ejemplo de diseño dinámico utilizando Calc
Todos hemos tenido que hacer frente al reto de crear un diseño responsive, o hacer que nuestros sitios o aplicaciones mantengan un aspecto similar en las diferentes resoluciones de pantalla, una situación para la que la función calc() es absolutamente perfecta. Es bastante sencillo crear un diseño dinámico utilizando porcentajes, pero mezclando porcentajes con valores fijos tendremos mucho más control sobre cómo nuestras imágenes se mostrarán al usuario final, sin importar la resolución.
Vamos a echar un vistazo a un ejemplo básico de un diseño a dos columnas donde utilizamos porcentajes para el ancho y el padding, y forzamos el navegador a ajustar el ancho mediante la eliminación de los valores combinados de nuestro padding.
El diseño en HTML5
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Page Title</title>
</head>
<body>
<div id="wrapper">
<header><h1>Page Title</h1></header>
<nav>Site Navigation</nav>
<section>Main Content Block</section>
<aside>Sidebar</aside>
<footer>Footer</footer>
</div>
</body>
</html>
El CSS
html, body {
margin: 0;
padding: 0;
}
#wrapper {
width: 75%;
margin:0 auto;
}
header {
padding: 10px;
}
nav {
padding: 10px;
}
section {
float:left;
width:60%;
padding: 10px;
}
aside {
float:right;
width: 20%;
/* The above is just a safe fallback
width value for browsers that don't
yet support the calc function */
width: -moz-calc(40% - (10px * 4));
/* Mozilla calc function */
width: -webkit-calc(40% - (10px * 4));
/* Webkit calc function */
width: calc(40% - (10px * 4));
/* Calc for W3C-compliant browsers */
padding: 10px;
}
footer {
clear: both;
padding: 10px;
}
Como puedes ver, es mucho más fácil mantener el tamaño relativo y el espaciamiento de los elementos mediante el cálculo de sus valores en lugar de utilizar porcentajes fijos. Podríamos hacer esto en cada contenedor individual, pero en el ejemplo anterior, sólo utilizamos el cálculo en la barra lateral para tener en cuenta el padding que hemos fijado a la izquierda y a la derecha de cada columna.
Fuente: binvisions.com