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.
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 . |
||
Funciones de signo | |||
abs() |
Función para obtener el valor absoluto (sin signo) de un número. | ||
sign() |
Función para saber que signo tiene un valor numérico. | ||
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.
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: 200px;
background: blue;
}
<div class="elemento"></div>
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);
background: indigo;
color: white;
}
<div class="container">
<header>Cabecera</header>
<p>Párrafo de texto.</p>
</div>
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
.
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:
.container {
width: 400px;
height: 225px;
background: grey;
}
.elemento {
width: min(200px, 25%);
height: 200px;
background: red;
}
<div class="container">
<div class="elemento"></div>
</div>
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ónmax()
permite tener más de 2 parámetros, no tiene que tener obligatoriamente 2 parámetros.
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 en este caso más de 2 parámetros:
.container {
width: 400px;
height: 225px;
background: grey;
}
.elemento {
width: max(200px - 100px, 25%, 14vw);
height: 150px;
background: red;
}
<div class="container">
<div class="elemento"></div>
</div>
Observa que como se ve en el ejemplo en
200px - 100px
, tanto enmin()
como enmax()
, puedes realizar operaciones directamente en su interior sin necesidad de utilizar la funcióncalc()
.
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:
.container {
width: 400px;
height: 225px;
background: grey;
}
.element {
width: clamp(100px, 25%, 300px);
height: 200px;
background: red;
}
.box {
width: max(100px, min(25%, 300px));
height: 200px;
background: navy;
}
<div class="container">
<div class="elemento"></div>
<div class="box"></div>
</div>
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:
width
.El soporte en navegadores de estas 3 últimas funciones de comparación es el siguiente:
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 a0
, entonces el redondeo no será válido (realmente devuelveNaN
), 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 usanearest
.
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 */
}
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
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 */
}
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:
.box {
width: calc(sin(45deg) * 100px);
height: 100px;
background: indigo;
}
<div class="box"></div>
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 comopx
oem
.
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 |
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:
.element::before {
content: attr(data-author);
font-size: 22px;
color: #444;
}
<div class="element" data-author="Manz">Elemento</div>
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:
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev