Las funciones matemáticas de valor escalonado de CSS ahora están en Baseline 2024

Rachel Andrew

Todos los motores principales ahora admiten las funciones matemáticas de valor escalonado de CSS: round(), mod() y rem().

Todas las funciones de valor escalonado transforman un valor dado de acuerdo con otro valor del paso.

La función round()

La función round() toma un valor para redondear, un intervalo de redondeo y una estrategia de redondeo opcional. El valor se redondea según la estrategia de redondeo, al múltiplo entero más cercano del intervalo de redondeo.

El valor que se debe redondear o el intervalo redondeado debe ser una propiedad personalizada de CSS. Si bien es válido codificar ambos valores, hay poco punto redondeando un número si puedes calcular el valor tú mismo.

El siguiente CSS redondea el valor de --my-font-size al intervalo de 1rem.

font-size: round(var(--my-font-size), 1rem);

La estrategia de redondeo predeterminada es nearest. El ejemplo anterior que incluye la estrategia de redondeo es el siguiente:

font-size: round(nearest,var(--my-font-size), 1rem);

Los valores posibles para la estrategia de redondeo son los siguientes:

  • up: Equivale al método Math.ceil() de JavaScript. Redondea el valor al múltiplo entero más cercano del intervalo de redondeo.
  • down: Equivale al método Math.floor() de JavaScript. Redondea el valor hacia abajo al múltiplo entero más cercano del intervalo de redondeo.
  • nearest (predeterminado): Equivale a Math.round() de JavaScript. Redondea el valor hacia arriba o hacia abajo, al múltiplo entero más cercano del intervalo de redondeo.
  • to-zero: Equivale al método Math.trunc() de JavaScript. Redondea el valor al múltiplo entero más cercano del intervalo de redondeo, que se encuentra más cerca de cero.

Obtén más información sobre round() en The New CSS Math: round(), de Dan Wilson.

Las funciones rem() y mod()

Las funciones de CSS rem() y mod() funcionan de manera similar al operador de resto (%) de JavaScript. Toman dos valores: el primero (el dividendo) se divide por el segundo (el divisor) y se muestra el resto.

margin: rem(18px, 5px); /* returns 3px */

La diferencia entre las dos funciones es que rem() siempre toma el signo del dividendo; por lo tanto, si el primer valor es positivo, el valor que se muestra será positivo. La función mod() toma el signo del divisor.

Obtén más información sobre rem() y mod() en The New CSS Math: rem() and mod(), de Dan Wilson.