Funciones matemáticas

<< @layer Colores >>

CSS ha introducido una serie de funciones que nos permite realizar cálculos u operaciones sencillas de forma fácil, estas funciones son:

calc(): permite realizar operaciones matemáticas con dichos valores o expresión (+, -, *, /).
min(), max(): Devuelve el valor mínimo o máximo de dicha expresión
clamp(): Equivale a max(MIN, min(VAL, MAX)), donde nos devuelve un valor entre un mínimo y un máximo establecidos. La forma de usarla es clamp(min, val, max), estos tres valores que le pasamos a la función pueden ser en diferentes unidades.
round(), mod(), rem(): Función para redondear, calcular el módulo o el resto. Todavía no son soportados por muchos navegadores.
sin(), cos(), tan(): Funciones para calcular el seno, coseno o tangente.
asin(), acos(), atan(): Funciones para calcular el arcoseno, arcocoseno o arcotangente de un valor.
atan2(): Función que calcula el arcotangente de dos valores.
pow(), sqrt(), hypot(), log(), exp(): Permite realizar la potencia, raíz cuadrada, hipotenusa, logaritmo o potencia de e. Todavía no son soportados por muchos navegadores.
abs(), sign(): Funciones que devuelven el valor absoluto de un número o el signo de un número. Todavía no son soportados por muchos navegadores y se prevee que se queden ahí.
attr(): Permite conocer el valor de un atributo desde CSS

Por tanto, tenemos en CSS funciones matemáticas de comparación, de cálculo, trigonométricas, exponenciales, así como los valores constantes matemáticos. Veamos un ejemplo ahora de alguno de ellos.

.elemento{
    width: calc(10px + 1em); /* Devuelve el resultado de la suma aun teniendo diferentes unidades */
    height: 300px;
    background: blue;
}

Tanto la función max, como min nos permite introducir tantos parámetros como queramos evaluar cuál de todos es el máximo/mínimo. Uno de esos parámetros puede ser una operación. Ejemplo:

.elemento{
    width: min(10px + 1em, 25%, 2vw); 
    height: 300px;
    background: blue;
}

Con la función clamp, podemos indicar un valor específico con una unidad relativa pero a la que quieres establecer un mínimo y un máximo.

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

El ejemplo anterior, el width sería como si hubiéramos puesto: width: max(100px, min(25%, 300px));. Primero calcula el mínimo, a continuación coge el máximo entre el 100px y el resultado anterior.

A continuación, vamos a ver la función round, a esta función le pasaremos el valor y el redondeo.

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

El método attr() nos devuelve el valor de un atributo. A diferencia de los anteriores, éste no es un método matemático ya que nos devuelve el valor de un atributo HTML. Ejemplo

blockquote {
    margin: 1em 0;
}

blockquote::after {
    display: block;
    content: ' (source: ' attr(cite) ') ';
    color: hotpink;
}

Nos va a mostrar por pantalla el valor del atributo cite que tenga ese blockquote.

A la función attr, podemos pasarle un segundo parámetro, un fallback (valor por defecto). Pero ojo, porque no es compatible por ahora en todos los navegadores.

<p data-foo="world">Hello </p>
<p></p>

<< @layer Colores >>