Funciones CSS

En CSS, muchas veces necesitaremos un sistema de apoyo para realizar operaciones más cercanas a un lenguaje de programación que a un lenguaje de estilos, como pueden ser cálculos o utilizar valores precalculados. Por esta razón, con el tiempo, se han ido añadiendo mejoras, como las custom properties, un mecanismo similar a unas variables CSS.

En este artículo vamos a ver algunas funciones CSS, 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.

Un resumen de las funciones CSS que veremos:

Función CSS Descripción
calc() Permite calcular operaciones con unidades CSS como px, %, vw, vh u otras.
min() Permite calcular el valor mínimo de las unidades indicadas.
max() Permite calcular el valor máximo de las unidades indicadas.
clamp() Permite calcular valores «ajustados». Equivalente a max(MIN, min(VAL, MAX)).
attr() Permite obtener el valor de un atributo desde CSS.

Valores calculados: Función calc()

Es posible que en algunas ocasiones necesitemos indicar valores precalculados por el navegador. Por ejemplo, la suma de dos valores que a priori desconocemos o no sabemos exactamente cuanto suman, pero que el navegador si debería conocer.

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...

Ten en cuenta que también se pueden anidar funciones calc() una dentro de otra. Resulta especialmente interesante su utilización junto a variables (custom properties CSS).

Valor mínimo: Función min()

En algunas ocasiones, necesitaremos que en una propiedad se aplique un valor de varias posibilidades posibles. De dichas posibilidades, no sabremos exactamente cuál necesitamos, pero si sabremos una de sus cualidades: es la más pequeña, es decir, necesitamos el valor mínimo.

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.

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 (ambas funciones permiten múltiples valores, no necesariamente dos):

.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 caso que podríamos necesitar y que se puede volver algo poco legible. Imagina que necesitas obtener el valor mínimo

Con la función clamp() podemos realizar, de forma concisa la operación max(MIN, min(VAL, MAX)). Veamos un ejemplo:

.elemento {
  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 es el siguiente:

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:

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Autor de Emezeta.com, es profesor en la Universidad de La Laguna y dirige el curso de Programación web FullStack y Diseño web FrontEnd de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.