Publicado em 14 de maio de 2024
Todos os principais mecanismos agora oferecem suporte às funções matemáticas de valor escalonado do CSS: round(), mod() e rem().
Todas as funções de valor escalonado transformam um valor específico de acordo com outro valor de etapa.
A função round()
A função round()
usa um valor a ser arredondado,
um intervalo de arredondamento e uma estratégia de arredondamento opcional.
O valor é arredondado de acordo com a estratégia de arredondamento,
para o múltiplo inteiro mais próximo do intervalo de arredondamento.
O valor a ser arredondado ou o intervalo arredondado precisa ser uma propriedade personalizada do CSS. Embora seja válido codificar ambos os valores, não há muito sentido em arredondar um número se você puder calcular o valor.
O CSS a seguir arredonda o valor de --my-font-size
para o intervalo de 1rem
.
font-size: round(var(--my-font-size), 1rem);
A estratégia de arredondamento padrão é nearest
. O exemplo anterior, incluindo a
estratégia de arredondamento, é o seguinte:
font-size: round(nearest,var(--my-font-size), 1rem);
Os valores possíveis para a estratégia de arredondamento são:
up
: equivalente ao métodoMath.ceil()
do JavaScript. Arredonda o valor para o múltiplo inteiro mais próximo do intervalo de arredondamento.down
: equivalente ao métodoMath.floor()
do JavaScript. Arredonda o valor para o múltiplo inteiro mais próximo do intervalo de arredondamento.nearest
(padrão): equivalente aMath.round()
do JavaScript. Arredonda o valor para cima ou para baixo, para o múltiplo inteiro mais próximo do intervalo de arredondamento.to-zero
: equivalente ao métodoMath.trunc()
do JavaScript. Arredonda o valor para o múltiplo inteiro mais próximo do intervalo de arredondamento mais próximo de zero.
Saiba mais sobre round()
em
The New CSS Math: round()
,
de Dan Wilson.
As funções rem()
e mod()
As funções CSS rem()
e mod()
funcionam de maneira semelhante ao
operador de resto (%) do JavaScript. Elas recebem dois valores, o primeiro (o dividendo) é dividido pelo segundo (o divisor),
e o restante é retornado.
margin: rem(18px, 5px); /* returns 3px */
A diferença entre as duas funções é que rem()
sempre recebe o sinal
do dividendo. Portanto, se o primeiro valor for positivo, o valor retornado
será positivo. A função mod()
usa o sinal do divisor.
Saiba mais sobre rem()
e mod()
em
The New CSS Math: rem()
and mod()
,
de Dan Wilson.