Funciones matemáticas CSS

¿Qué es una función CSS?

En CSS muchas veces necesitamos utilizar un mismo valor en varios lugares diferentes de nuestro código. Si lo hacemos indicando el valor en cuestión en cada uno de esos lugares, si en algún momento necesitamos cambiarlo, tendremos que cambiarlo en todos los lugares donde aparece, cuidando que no se nos olvide alguno o modifiquemos de forma errónea (algo bastante habitual). Por esta razón, con el tiempo, se han ido añadiendo mejoras, como las custom properties, un mecanismo similar a unas variables CSS.

Sin embargo, también tenemos un sistema de apoyo para realizar operaciones donde el navegador realiza los cálculos, en lugar de indicarlo de forma manual nosotros. Es un método más cercano a un lenguaje de programación que a un lenguaje de estilos, como pueden ser realizar cálculos o utilizar valores precalculados.

Funciones CSS matemáticas

En este artículo vamos a ver ciertas funciones CSS matemáticas, que no son más que funciones de apoyo que podemos utilizar en CSS para realizar cálculos u operaciones sencillas de una forma fácil y sencilla, sin tener que abandonar CSS y/o recurrir a Javascript.

Un resumen rápido de las funciones CSS que veremos:

Función CSS	Descripción
Funciones de cálculos
calc()	Permite calcular operaciones con unidades CSS como px, %, vw, vh u otras (incluso combinadas)
Funciones de comparación
min() / max()	Permite calcular el valor mínimo o máximo de las unidades indicadas.
clamp()	Permite calcular valores «ajustados». Equivalente a max(MIN, min(VAL, MAX)).
Funciones escalonadas
round() / mod() / rem()	Funciones que permiten redondear, obtener el módulo o el resto.
Funciones trigonométricas
sin() / cos() / tan()	Permite obtener el seno, coseno o tangente de un valor.
asin() / acos() / atan()	Permite obtener el arcoseno, arcocoseno o arcotangente de un valor.
atan2()	Aplica la función arcotangente de dos parámetros.
Funciones exponenciales
pow() / sqrt() / hypot()	Permite realizar potenciación, raíces cuadradas o hipotenusa.
log() / exp()	Permite realizar logaritmos o potencias de e.
Otras
e / pi / Infinity / NaN	Palabras clave que representan valores matemáticos.	Ver constantes o NaN
attr()	Permite obtener el valor de un atributo desde CSS.

Comencemos a analizarlas detalladamente.

Cálculos: Función calc()

Es posible que en algunas ocasiones necesitemos indicar valores precalculados por el navegador, ya porque sea más cómodo o porque simplemente queremos hacer el código más organizado o fácil de mantener. Por ejemplo, la suma de dos valores que a priori desconocemos o no sabemos exactamente cuanto suman, pero que el navegador si puede calcularlo facilmente.

Esto es posible hacerlo con la función calc() de CSS, como se muestra a continuación:

.elemento {
  width: calc(200px + 1em);
  height: 300px;
  background: blue;
}

Como se puede ver, se pueden usar operaciones como sumas ( + ), restas ( - ), multiplicaciones ( * ) o divisiones ( / ) que utilicen alguna de las unidades soportadas por CSS, como por ejemplo, números, dimensiones, porcentajes, tiempos, ángulos, etc... Observa que incluso podemos mezclarlas. De la misma forma, también podemos utilizar variables CSS.

Ten en cuenta que se pueden anidar funciones calc() una dentro de otra, o incluso crear nuevas variables aprovechando los ámbitos de las Custom Properties:

:root {
  --width: 550px;
}

header {
  --header-width: calc(var(--width, 500px) / 2);

  width: var(--header-width);
}

Observa que creamos una variable local --header-width con un valor basado en la variable global --width, por lo que si cambiamos el valor de --width se actualizarán los valores que dependan de ella automáticamente, y solo tendrán valor en el lugar que especifiquemos (en este ejemplo, en los elementos header). En el caso de que no exista el valor --width, establece un valor base de 500px.

Funciones de comparación

Valor mínimo: Función min()

En algunas ocasiones, necesitaremos que en una propiedad se aplique un valor entre varias posibilidades posibles, y lo que te interesa es el valor más pequeño.

CSS permite realizar esto utilizando la función min() que nos permite elegir el valor más pequeño de 2 o más posibilidades aplicadas por parámetro:

.elemento {
  width: min(200px, 25%);
  height: 200px;
  background: red;
}

Esto aplicaría un width de 200px, siempre y cuando el 25% del elemento padre sea más grande de 200px. Todo este cálculo, generalmente realizado en Javascript debido a su cualidad de lógica de cálculo, puede realizarse desde CSS si sólo se utiliza exclusivamente para esta finalidad.

Recuerda que tanto la función min() como la función max() permite tener más de 2 parámetros, no tiene que tener obligatoriamente 2 parámetros.

Valor máximo: Función max()

De la misma forma que tenemos una función min(), también tenemos una función max(). Como podemos imaginar, dicha función sirve para lo opuesto de la función min(): obtener el valor máximo entre varias posibilidades. Observa el siguiente ejemplo, donde utilizamos más de 2 parámetros:

.elemento {
  width: max(200px - 100px, 25%, 14vw);
  height: 200px;
  background: red;
}

Observa que como se ve en el ejemplo en 200px - 100px, tanto en min() como en max(), puedes realizar operaciones directamente en su interior sin necesidad de utilizar la función calc().

Valor ajustado: Función clamp()

Ahora pensemos en un nuevo caso que podría ocurrir. Imagina que necesitas indicar un valor específico, con una unidad relativa, pero a la que le quieres establecer un mínimo y un máximo. Con la función clamp() podemos realizar, de forma concisa la operación max(MIN, min(VAL, MAX)) y crear valores flexibles pero con un mínimo y un máximo establecido.

Veamos un ejemplo:

.element {
  width: max(100px, min(25%, 300px));
  width: clamp(100px, 25%, 300px);
  height: 200px;
  background: red;
}

Observa que existen dos líneas con un width. Ambas líneas son equivalentes. El primer valor de clamp() sería el valor mínimo, mientras que el tercero es el valor máximo. De esta forma, el navegador realiza lo siguiente:

• Obtiene el valor mínimo entre el segundo y tercer parámetro.
• Obtiene el valor máximo entre el primer parámetro y el resultado anterior.
• Utiliza el resultado de la operación anterior en el width.

El soporte en navegadores de estas 3 últimas funciones de comparación es el siguiente:

Funciones escalonadas

Redondeo: Función round()

La función round() permite redondear valores, es decir, prescindir de pequeñas diferencias en las cantidades, teniendo en cuenta sólo unidades superiores.

Función CSS	Descripción
round(value, interval)	Redondea value con el número de decimales de interval.
round(mode, value, interval)	Idem, utilizando la estrategia mode de redondeo.

Observa el siguiente ejemplo, donde puedes ver como funciona la función round():

.element {
  width: round(124.75px, 1px);        /* 125px */
  width: round(124.75px, 10px);       /* 120px */
  width: round(124.75px, 100px);      /* 100px */
  width: round(124.75px, 0.1px);      /* 124.7px */
  width: round(124.75px, 0.01px);     /* 124.75px */
  width: round(124.75px, 0.001px);    /* 124.75px */
}

Ten en cuenta que, si indicamos un valor de interval igual a 0, entonces el redondeo no será válido (realmente devuelve NaN), por lo que ignora la propiedad..

Si queremos un tipo de redondeo específico, podemos indicar un primer parámetro en la función round() y establecer la estrategia de redondeo:

Estrategia	Descripción
nearest	Redondea al extremo más próximo. Si es igual, redondeo superior. Equivale a Math.round()
up	Redondeo superior. Equivalente a Math.ceil()
down	Redondeo inferior. Equivalente a Math.floor()
to-zero	Trunca el valor. Equivalente a Math.trunc().

Si no se especifica ninguna estrategia de redondeo en round(), por defecto se usa nearest.

Veamos algunos ejemplos:

.element {
  width: round(nearest, 124.75px, 1px);   /* 125px */
  width: round(nearest, 124.25px, 1px);   /* 124px */

  width: round(up, 124.75px, 1px);        /* 125px */
  width: round(up, 124.25px, 1px);        /* 125px */
  width: round(down, 124.75px, 1px);      /* 124px */
  width: round(down, 124.25px, 1px);      /* 124px */

  width: round(to-zero, -25px, 1px);      /* 0px */

  width: round(124.75px, 1px);            /* 125px, nearest por defecto */
}

Módulo: Función mod()

La función mod() de CSS, permite realizar el módulo, que no es más que obtener el resto de la división de un número entre otro. Veamos un ejemplo utilizándolo en CSS:

.element {
  translate: mod(500px, 200px);     /* 100px */
  translate: mod(-500px, 200px);    /* 100px */
}

Esta operación suele ser muy utilizada en programación para realizar cálculos incrementales y acotar los límites, de modo que cuando se superen, se vuelvan al valor inicial. De esta forma siempre te encuentras del rango deseado:

0 + 1 = 1       1 % 5 = 1
1 + 1 = 2       2 % 5 = 2
2 + 1 = 3       3 % 5 = 3
3 + 1 = 4       4 % 5 = 4
4 + 1 = 5       5 % 5 = 0
5 + 1 = 6       6 % 5 = 1
6 + 1 = 7       7 % 5 = 2
7 + 1 = 8       8 % 5 = 3

Resto: Función rem()

La función rem() de CSS, permite realizar el resto. Funciona de forma muy similar al módulo, sin embargo, hay diferencias cuando utilizamos números negativos.

.element {
  translate: rem(500px, 200px);     /* 100px */
  translate: rem(-500px, 200px);    /* -100px */
}

Funciones trigonométricas

Recientemente se han añadido una serie de funciones CSS que permiten realizar calculos trigonométricos básicos sin necesidad de utilizar Javascript. Esto nos da una gran cantidad de posibilidades a la hora de realizar tareas geométricas.

Las funciones CSS trigonométricas disponibles actualmente son las siguientes:

Función CSS	Descripción	Un ejemplo
sin()	Función matemática seno.	sin(45deg) ~ 0.8509
cos()	Función matemática coseno.	cos(45deg) ~ 0.5253
tan()	Función matemática tangente.	tan(45deg) ~ 1.6197
asin()	Función matemática arcoseno.	asin(-1) ~ -PI/2
acos()	Función matemática arcocoseno.	acos(-1) ~ PI
atan()	Función matemática arcotangente.	atan(-1) ~ -PI/4
atan2()	Función matemática arcotangente de 2 parámetros.	atan2(90, 90) ~ PI/4

La forma de utilizarlas es muy similar a las que hemos visto anteriormente:

.element {
  translate: 100px calc(100px * sin(45deg));
}

Funciones exponenciales

En el caso de que necesitamos funciones CSS para jugar con valores exponenciales, también podemos utilizar la siguiente familia de funciones, que nos permiten realizar cálculos de potenciación, raíces cuadradas, hipotenusa, logaritmos, etc.

Función CSS	Descripción	Un ejemplo
pow()	Devuelve la base A elevada al exponente B.	pow(A, B)
sqrt()	Devuelve la raíz cuadrada de A.	sqrt(A) ~ pow(A, 0.5)
hypot()	Devuelve la raíz cuadrada de A²+B² + …	hypot(A, B, …) ~ sqrt(pow(A, 2) + pow(B, 2) + …)
log()	Devuelve el logaritmo de A en base B (si se omite, es e)	log(A, B)
exp()	Devuelve el valor exponencial de A.	exp(A) ~ pow(e, A)

Ten en cuenta, que la función hypot(), al contrario que el resto de funciones anteriores, permite indicar valores con unidades como px o em.

Funciones de signo

Cerramos la lista de funciones matemáticas CSS con las funciones abs() y sign(). Estas funciones nos permiten jugar con los signos de valores, de modo que la función abs() obtiene el valor absoluto de un número, mientras que la función sign() nos devuelve -1, 1 o 0, dependiendo del valor del signo:

Función CSS	Descripción	Un ejemplo
abs()	Devuelve el valor absoluto de A	abs(-5) = 5
sign()	Devuelve -1, 0 o 1 dependiendo del signo de A	sign(-5) = -1

Otros valores

Valor del atributo: Función attr()

Aunque no es de género matemático como las anteriores, existe la función CSS attr(), que es algo más particular, ya que permite obtener el valor de un atributo HTML y utilizarlo desde CSS, generalmente para temas de decoración.

Por ejemplo, observa el siguiente fragmento de código:

<div class="element" data-author="Manz"></div>

<style>
.element::before {
  content: attr(data-author);
  font-size: 22px;
  color: #444;
}
</style>

Por medio de una pseudoclase CSS, utilizando la propiedad content, le pedimos al navegador que utilice el metadato del atributo data-author del elemento donde se le está aplicando el CSS para mostrarlo como contenido.

Esta función CSS es la más antigua y la mejor soportada en navegadores: