C髆o utilizar la funci髇 Calc en CSS3

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

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.