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
intervaligual a0, entonces el redondeo no será válido (realmente devuelveNaN), 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 usanearest.
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>
