CSS: Cálculo

En CSS existe ciertas funciones que permiten realizar cálculos matemáticos para obtener un resultado a partir de uno o varios argumentos. Pueden ser muy útiles a la hora de crear diseños que sean flexibles y dinámicos; además pueden ahorrar el uso de un lenguaje de programación como sería el caso de JavaScript.

La esencia de las funciones es llegar a escribir un valor de una propiedad —como podría ser el ancho de un contenedor, la duración de una animación o el tamaño de una fuente— como una expresión matemática. Esta funcionalidad abre un amplio abanico de posibilidades en el diseño de páginas web.

De hecho, algunas unidades de longitud relativas ya ofrecen cierta flexibilidad, con grandes ventajas en el diseño web responsive y mejorando así la experiencia de usuario. Pero hay casos en los que se necesita ir un paso más allá que nos permita aplicar un valor que sea el resultado de una operación aritmética.

Dentro del diseño web responsive, puede ser de gran utilidad el hecho de restar un valor absoluto a un porcentaje. Por ejemplo, imaginemos que queremos que el ancho de un contenedor siempre ocupe el 100% de anchura, excepto 25 píxeles. Podríamos definirlo con la función calc(), de la siguiente manera:

.contenedor {
  width: calc(100% - 25px);
}

La ventaja de usar funciones CSS para realizar cálculos matemáticos es que es más sencillo de implementar que si usáramos JavaScript. Además, la ejecución de código JavaScript por parte del navegador siempre será más lenta.

Cálculo aritmético

La función calc() permite realizar operaciones aritméticas básicas, como la suma, la resta, la multiplicación y la división. Como parámetro toma una expresión matemática. Puede ser usada en cualquier propiedad que admita una unidad de longitud, de ángulo, de tiempo o un valor numérico.

Dentro de esta función puede usarse los símbolos de sumar (+), restar (-), multiplicar (*) y dividir (/). Los operandos de la expresión matemática pueden ser positivos o negativos. Se puede usar diferentes unidades, Por lo tanto es posible combinar las unidades relativas con las absolutas.

Es importante destacar que los operadores + y - deben ir separados por un espacio en blanco. Esto no es obligatorio en el caso de los operadores * y /, pero es recomendable, ya que facilita la legibilidad.

Por ejemplo:

.correcto {
  width: calc(5% + 4px);
}

.incorrecto {
  width: calc(5%+4px);
}

En los casos que queramos usar el valor 0, es obligatorio especificar la unidad, ya sean píxeles, puntos, centímetros, pulgadas, grados, un porcentaje, etc. En caso de no especificarse, la expresión matemática no será válida.

Por ejemplo:

.correcto {
  width: calc(4% + 0px);
}

.incorrecto {
  width: calc(4%+0);
}

El anidamiento de funciones calc() está permitido. Esto significa que dentro de esta función podemos usar una nueva función calc() como si se tratara de un parámetro convencional, con su propia expresión matemática. También se puede anidar otras funciones, como las variables (var()).

Por ejemplo:

.anidacion {
  width: calc(calc(10% + 2px) - calc(2% + 3px));
}

En un contexto en el que se espera como valor un número entero, se puede usar una expresión matemática sin indicar las unidades. Si el resultado va a tener decimales, se redondeará al valor entero más cercano.

Por ejemplo:

.enteros {
  animation-iteration-count: calc(8 / 5);
}

La propiedad CSS usada en el ejemplo anterior espera como valor un número entero. Dado que el resultado de la operación 8 / 5 equivale a 1.6, el resultado se redondea automáticamente a 2.

Comparación

En ocasiones puede ser necesario comparar valores numéricos para extraer el valor más grande o el valor más pequeño de una lista de valores. Para ello se usa las funciones max() y min(), respectivamente. También podemos usar la función clamp() para calcular un valor de una forma más ajustada.

Valor máximo

La función max() permite obtener el valor más grande de una lista de valores. Puede ser usada en cualquier propiedad CSS que espere como valor un número que indique una cantidad de algo, con o sin unidades de medida.

Los valores que forman la lista deben ir separados con una coma. Se pueden indicar de muchas formas: de forma literal; usando una expresión matemática, que evita el uso de calc(); anidando las funciones max() o min(); o anidando la función attr(), que obtiene el valor de un atributo HTML.

Por ejemplo:

.maximo {
  width: max(20%, 200px, 3em);
}

Valor mínimo

La función min() permite obtener el valor más pequeño de una lista de valores. Al igual que en la función anterior, se puede usar en todas las propiedades que esperen un valor numérico, con o sin unidades de medida.

También se puede indicar los valores a través de varios métodos: por ejemplo, expresado de forma literal; con una expresión matemática, sin tener que usar calc(); o bien anidando las funciones min(), max() y attr().

Por ejemplo:

.minimo {
  width: min(20%, 200px, 3em);
}

Valor ajustado

La función clamp() permite fijar un valor medio dentro de un rango de valores. Por tanto, esta función toma tres parámetros: el primero es el valor mínimo permitido, el segundo es el valor preferido y el tercero es el valor máximo.

Su sintaxis es la siguiente:

clamp(MIN, VAL, MAX);

Se resuelve de la siguiente manera:

max(MIN, min(VAL, MAX));

Por ejemplo:

.ajusta {
  width: clamp(200px, 50%, 400px);
}

Se trata de una función muy interesante ya que permite crear valores de una forma flexible, en la que se respeta unos valores mínimos y máximos. Así se puede crear un ancho responsive que escala entre los dos valores especificados.

Redondear valores

La función round() permite redondear valores. Puede tomar dos o tres parámetros: la estrategia del redondeo, el valor y el intervalo. El primero es opcional, mientras que los otros dos son obligatorios.

Esta es la sintaxis:

round(estrategia, valor, intervalo);

El parámetro referente a la estrategia se refiere al hecho de redondear hacia arriba, hacia abajo, etc. Estas son las opciones posibles:

Los otros dos parámetros son obligatorios. Ambos valores serán un número con o sin las unidades de medida. También pueden ser expresiones matemáticas u otras funciones; es interesante el uso de variables (var()).

Por ejemplo:

.redondea {
  width: round(2.2, 1);
}

Calcular el módulo

La función mod() permite calcular el módulo entre dos valores. Esta función toma dos parámetros: el dividendo y el divisor. Por norma, el resultado conservará el signo del segundo parámetro, el del divisor. Se llama «mod» porque en informática la operación módulo obtiene el resto de la división.

Su sintaxis es la siguiente:

mod(dividendo, divisor);

Por ejemplo:

.modulo {
  width: mod(17, 5);
}

En este ejemplo, la división de 17 entre 5 dará como resultado 3 con un resto de 2. Por tanto, el resultado de esta función será 2.

Calcular el residuo

La función rem() permite obtener el resto de la división entre dos valores. Es muy similar a la función anterior, con los parámetros del dividendo y el divisor; pero con la diferencia de que el resultado conserva el signo del dividendo.

La sintaxis de rem():

rem(dividendo, divisor);

Por ejemplo:

.residuo {
  width: rem(17, 5);
}

En este ejemplo, el residuo es el mismo que el módulo (mismo signo).

Funciones trigonométricas

CSS también provee funciones para realizar cálculos trigonométricos sin tener que usar JavaScript como lenguaje adicional. Pueden ser de gran utilidad en diseño de figuras geométricas y en la configuración de animaciones.

Calcular el seno

La función sin() permite calcular el seno de un ángulo. Por tanto, como resultado devuelve un valor comprendido entre -1 y 1. Como parámetro admite un valor numérico equivalente al ángulo.

Por ejemplo:

.seno {
  width: sin(45deg);
}

Calcular el coseno

Para calcular el coseno de un ángulo se usa la función cos(). También admite como parámetro un valor numérico que puede ser expresado sin unidades o con unidades de ángulo. Como resultado devuelve un valor entre -1 y 1.

Por ejemplo:

.coseno {
  width: cos(45deg);
}

Calcular la tangente

La tangente de un número se calcula mediante la función trigonométrica tan(). El resultado será un valor decimal que puede ser tanto positivo como negativo. Como parámetro acepta un valor numérico que equivalente al ángulo.

Por ejemplo:

.tangente {
  width: tan(45deg);
}

Calcular el arcoseno

La función asin() calcula la inversa del seno (arcoseno). El parámetro será un único valor numérico decimal que debe estar comprendido entre -1 y 1. Devuelve un ángulo en radianes que va entre -90 grados y 90 grados.

Por ejemplo:

.arcoseno {
  width: asin(0.5);
}

Calcular el arcocoseno

La función acos() calcula la inversa del coseno (arcocoseno) a partir de un número decimal comprendido entre -1 y 1. El resultado será un valor comprendido entre los 0 grados y los 180 grados.

Por ejemplo:

.arcocoseno {
  width: acos(0.5);
}

Calcular la arcotangente

La función atan() calcula la inversa de la tangente (arcotangente) de un número decimal infinito, ya sea positivo o negativo. El resultado será un valor equivalente al ángulo comprendido entre -90 grados y 90 grados.

Por ejemplo:

.arcotangente {
  width: atan(0.5);
}

Calcular la arcotangente con 2 parámetros

De forma alternativa a la función anterior, puede usarse la función atan2() para calcular la inversa de la tangente. Esta función admite dos parámetros referentes a las coordenadas X e Y para definir el ángulo deseado. Como resultado devuelve un ángulo comprendido entre -180 grados y 180 grados.

Su sintaxis es la siguiente:

atan2(X, Y);

Por ejemplo:

.arcotangente2 {
  width: atan2(20, 40);
}

Operaciones con potencias y logaritmos

En CSS también existe una serie de funciones que permiten realizar operaciones con potencias y logaritmos, como sería un número elevado a otro, una raíz cuadrada, un logaritmo e incluso se puede calcular la hipotenusa.

Calcular la potencia

La función pow() permite calcular la potencia de un número. Esta función obtiene dos parámetros: la base y el exponente. Los valores numéricos introducidos no deben indicar las unidades. Devuelve el valor de un número elevado a otro. Por ejemplo: 5² equivale a 5×5, que da como resultado 25.

Su sintaxis es la siguiente:

pow(base, potencia);

Por ejemplo:

.potencia {
  width: pow(5, 2);
}

Calcular la raíz cuadrada

Para calcular la raíz cuadrada de un número se usa la función sqrt(). Se trata de una función de fácil utilización. Admite un único parámetro que será un valor numérico sin unidades. Por ejemplo, el resultado de sqrt(64) es 8.

Por ejemplo:

.raiz {
  width: sqrt(64);
}

Calcular la hipotenusa

La función hypot() es muy interesante porque permite calcular la hipotenusa. Admite dos o más parámetros que serán valores numéricos, y se acepta indicar las unidades de longitud. Como resultado, esta función devuelve la raíz cuadrada de la suma de los cuadrados de los parámetros indicados.

Su sintaxis es la siguiente:

hypot(x1, x2, x3..., xN);

Por ejemplo:

.hipotenusa {
  width: hypot(3, 4);
}

Calcular el logaritmo

La función log() permite calcular el logaritmo de un número. Esta función acepta dos parámetros separados por coma. El primero debe ser un valor numérico que representa el valor sobre el que se va a calcular el logaritmo, y debe ser mayor o igual que 0. El segundo representa la base del logaritmo. Si no se indica, la base por defecto es el número e (aproximadamente 2.7182818).

Sintaxis de log():

log(valor, base)

Por ejemplo:

.logaritmo {
  width: log(8, 2);
}

Calcular el valor exponencial

La función exp() permite calcular el valor exponencial de un número. Como parámetro admite un único valor numérico que se quiere elevar con una potencia del número e. Como resultado devuelve un número no negativo, resultado de calcular e elevado a la potencia de un número.

Por ejemplo:

.exponente {
  width: exp(4);
}

Valor absoluto

Para garantizar que un número siempre sea positivo se puede usar la función abs(). Esta función solo acepta un parámetro, que será el número que debe ser positivo. Lo que hace es convertir los números negativos en positivos, y dejar intactos los positivos. El resultado será un valor numérico positivo.

Por ejemplo:

.absoluto {
  width: abs(-5);
}

Determinar el signo

La función sign() permite determinar el signo de un valor numérico. Como parámetro admite un único valor numérico. El resultado será 1 si el valor introducido es positivo, será -1 si es negativo, será 0 si es un cero positivo y será -0 si es un cero negativo; de lo contrario, devolverá NaN.

Por ejemplo:

.signo {
  width: sign(-5);
}