As funções matemáticas de valor em degraus do CSS agora estão no valor de referência de 2024

Rachel Andrew

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étodo Math.ceil() do JavaScript. Arredonda o valor para o múltiplo inteiro mais próximo do intervalo de arredondamento.
  • down: equivalente ao método Math.floor() do JavaScript. Arredonda o valor para o múltiplo inteiro mais próximo do intervalo de arredondamento.
  • nearest (padrão): equivalente a Math.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étodo Math.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.