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étodoMath.ceil()
de JavaScript. Redondea el valor hacia arriba al múltiplo entero más cercano del intervalo de redondeo.down
: Equivalente al métodoMath.floor()
de JavaScript. Redondea el valor al múltiplo entero más cercano del intervalo de redondeo.nearest
(predeterminado): Equivale a JavaScriptMath.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étodoMath.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.