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

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 según otro step value.

La función round()

La función round() toma un valor para redondear, un intervalo de redondeo y una estrategia opcional de redondeo. 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 va a redondear o el intervalo redondeado debe ser una CSS. propiedad personalizada. Si bien es válido codificar ambos valores, punto redondeando un número si pudieras 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, incluido el de redondeo es la siguiente:

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

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

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

Más información sobre round() en La nueva matemática de CSS: round(), por Dan Wilson.

Las funciones rem() y mod()

Las funciones de CSS rem() y mod() funcionan de manera similar a JavaScript. operador restante (%). Toma dos valores, el primero (el dividendo) se divide por el segundo (el divisor), y el resto se devuelve.

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, se devuelve serán positivas. La función mod() toma el signo del divisor.

Más información sobre rem() y mod() en La nueva matemática de CSS: rem() y mod(), por Dan Wilson.