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

Rachel Andrew

Todos os principais mecanismos agora oferecem suporte às funções matemáticas de valor em degraus do CSS: round(), mod() e rem().

Celebração: esse recurso da Web agora está disponível nos três principais mecanismos de navegador.

Todas as funções de valor em degraus transformam um determinado valor de acordo com outro valor de etapa.

A função round()

A função round() usa um valor para ser arredondado, um intervalo de arredondamento e uma estratégia 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 de CSS. Embora seja válido fixar no código os dois valores, não haverá nenhum ponto em arredondar um número se você mesmo pudesse 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 padrão de arredondamento é 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 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 para o múltiplo inteiro mais próximo do intervalo de arredondamento.
• nearest (padrão): equivalente ao 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 o round() em The New CSS Math: round() (em inglês), de Dan Wilson.

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

As funções CSS rem() e mod() funcionam de maneira semelhante ao operador restante (%) do JavaScript. Elas tomam 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á positivo. A função mod() usa o sinal do divisor.

Observação : as unidades dos dois valores não precisam ser iguais, mas os valores precisam ser do mesmo tipo: número, dimensão ou porcentagem. O valor retornado será do mesmo tipo que o valor transmitido.

Saiba mais sobre rem() e mod() em The New CSS Math: rem() and mod() (em inglês), de Dan Wilson.