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

Todos os principais mecanismos agora são compatíveis com as funções matemáticas de valores em degraus do CSS— round(), mod(), e rem().

Todas essas funções transformam um determinado valor de acordo com outro valor da etapa.

A função round()

A função round() usa um valor para 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 deve ser um CSS. propriedade personalizada. Embora seja válido fixar os dois valores no código, há pouco ponto de arredondamento de um número se você pudesse calcular o valor por conta própria.

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 é a 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 cima 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 baixo até o múltiplo inteiro mais próximo do intervalo de arredondamento.
  • nearest (padrão): equivalente ao JavaScript Math.round(). Arredonda o valor para cima ou para baixo, até 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 A nova matemática do CSS: round(), por Dan Wilson.

As funções rem() e mod()

As funções CSS rem() e mod() funcionam de maneira semelhante ao JavaScript. operador restante (%). Elas pegam 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 usa o sinal do dividendo. Portanto, se o primeiro valor for positivo, o valor retornado serão positivos. A função mod() usa o sinal do divisor.

Saiba mais sobre rem() e mod() em A nova matemática do CSS: rem() e mod(), por Dan Wilson.