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étodoMath.ceil()
do JavaScript. Arredonda o valor para cima para o múltiplo inteiro mais próximo do intervalo de arredondamento.down
: equivalente ao métodoMath.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 JavaScriptMath.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é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
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.