Funciones round(), mod() y rem()

Las funciones escalonadas se denominan así porque al aplicarlas sobre determinados valores, permiten crear una gráfica en forma de escalones. Esta serie de funciones CSS permiten redondear números, calcular el módulo o el resto. Vamos a ver cada una de ellas, por separado.

La 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 {
  height: 25px;
  background: indigo;
  color: white;
  margin: 5px;
}

.a { width: round(124.75px, 1px); }     /* 125px */
.b { width: round(124.75px, 10px); }    /* 120px */
.c { width: round(124.75px, 100px); }   /* 100px */
.d { width: round(124.75px, 0.1px); }   /* 124.7px */
.e { width: round(124.75px, 0.01px); }  /* 124.75px */
.f { width: round(124.75px, 0.001px); } /* 124.75px */

<div class="element a">125px</div>
<div class="element b">120px</div>
<div class="element c">100px</div>
<div class="element d">124.7px</div>
<div class="element e">124.75px</div>
<div class="element f">124.75px</div>

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

Tipos de redondeos

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 {
  height: 25px;
  background: indigo;
  color: white;
  margin: 5px;
}

.g { color: black; }

.a { width: round(nearest, 124.75px, 1px); }    /* 125px */
.b { width: round(nearest, 124.25px, 1px); }    /* 124px */
.c { width: round(up, 124.75px, 1px); }         /* 125px */
.d { width: round(up, 124.25px, 1px); }         /* 125px */
.e { width: round(down, 124.75px, 1px); }       /* 124px */
.f { width: round(down, 124.25px, 1px); }       /* 124px */
.g { width: round(to-zero, -25px, 1px); }       /* 0px */
.h { width: round(124.75px, 1px); }             /* 125px, nearest por defecto */

<div class="element a">125px</div>
<div class="element b">124px</div>
<div class="element c">125px</div>
<div class="element d">125px</div>
<div class="element e">124px</div>
<div class="element f">124px</div>
<div class="element g">0px</div>
<div class="element h">125px</div>

La función `mod()`

La función mod() de CSS, permite realizar el módulo de un número, 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 {
  height: 25px;
  background: indigo;
  color: white;
}

.b, .d { color: black; }

.a { width: mod(50px, 100px); }    /* 50px */
.b { width: mod(100px, 100px); }   /* 0px */
.c { width: mod(150px, 100px); }   /* 50px */
.d { width: mod(200px, 100px); }   /*  0px */
.e { width: mod(-500px, 100px); }   /* 100px */

<div class="element a">50px</div>
<div class="element b">0px</div>
<div class="element c">50px</div>
<div class="element d">0px</div>
<div class="element e">100px</div>

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

La 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 {
  height: 25px;
  background: indigo;
  color: white;
}

.b, .d { color: black; }

.a { width: rem(50px, 100px); }    /* 50px */
.b { width: rem(100px, 100px); }   /* 0px */
.c { width: rem(150px, 100px); }   /* 50px */
.d { width: rem(200px, 100px); }   /*  0px */
.e { width: rem(-500px, 100px); }   /* 100px */

<div class="element a">50px</div>
<div class="element b">0px</div>
<div class="element c">50px</div>
<div class="element d">0px</div>
<div class="element e">0px</div>