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

Rachel Andrew

Fecha de publicación: 14 de mayo de 2024

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

Todas las funciones de valor escalonado transforman un valor determinado según otro valor de paso.

La función round()

La función round() toma un valor que se 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 redondeará o el intervalo redondeado debe ser una propiedad personalizada de CSS. Si bien es válido codificar ambos valores, no tiene mucho sentido redondear un número si puedes calcularlo por tu cuenta.

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: Es equivalente al método Math.ceil() de JavaScript. Redondea el valor al múltiplo entero más cercano del intervalo de redondeo.
  • down: Es equivalente al método Math.floor() de JavaScript. Redondea el valor hacia abajo al múltiplo entero más cercano del intervalo de redondeo.
  • nearest (predeterminada): 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: Es equivalente al método Math.trunc() de JavaScript. Redondea el valor al múltiplo entero más cercano del intervalo de redondeo más cercano a 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 rem() y mod() de CSS 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.