A nova matemática CSS: round()

CSS adicionou muitas novas funções matemáticas para complementar as antigas favoritas (pense calc()nas mais recentes clamp()). Em última análise, todos eles representam um valor numérico, mas a nuance de como funcionam nem sempre é clara desde o início. Esta série tem como objetivo analisar cada função com casos de uso comuns… e os menos comuns também.

O básico do CSS round()

Em JavaScript temos Math.round()que leva um parâmetro numérico e o resultado será o número inteiro mais próximo. Portanto, 1.4é arredondado para baixo 1porque está mais próximo 1de 2. Da mesma forma, 3.9arredonda para cima, 4pois é o número inteiro mais próximo.

console.log(Math.round(2.2)); // 2
console.log(Math.round(14.82)); // 15
console.log(Math.round(5.5)); // 6

Com CSS, round()comporta-se de forma semelhante por padrão, exceto que leva dois parâmetros. O primeiro é o valor que você deseja arredondar e o segundo é o número de precisão.

Quando você está pensando em matemática geral ou JavaScript, o número de precisão seria 1porque estamos sempre olhando para números inteiros e esperamos que nossa resposta seja um múltiplo de 1. Para que o CSS tenha o equivalente direto do JavaScript Math.round(), diríamos round(3.9, 1).

line-height: round(2.2, 1); /* 2 */
line-height: round(14.82, 1); /* 15 */
line-height: round(5.5, 1); /* 6 */

Mas… por que preciso de dois parâmetros?

Como estamos trabalhando com diversas unidades CSS em diversas escalas, a especificação nos permite trabalhar da maneira mais adequada à nossa necessidade.

Mantendo-o sem unidade por mais algum tempo, pense em opacity. Seu intervalo razoável é de 0a 1. Arredondar aqui para um número inteiro sempre levaria a zero ou um. Pode ser isso que você deseja, mas talvez queira com um intervalo diferente, como a casa dos décimos, de modo que sua opacidade seja sempre um dos 11 valores: 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1. O arredondamento CSS permite isso e você pode especificá-lo com precisão de 0.1. Então, em vez de contar um, você conta um décimo.

opacity: round(.56, 0.1); /* 0.6 */
opacity: round(.54, 0.1); /* 0.5 */

Seguimos a mesma lógica ao considerar unidades. Talvez eu queira sempre girar um objeto em intervalos de 45 graus. Posso definir 45degminha unidade de precisão para garantir que minha rotação seja sempre um múltiplo de 45 graus.

rotate: round(20deg, 45deg); /* 0deg */
rotate: round(30deg, 45deg); /* 45deg */
rotate: round(80deg, 45deg); /* 90deg */

Você pode até misturar unidades se elas tiverem a mesma sintaxe. Existem outras opções de ângulo além degde turne rad, então podemos usar qualquer uma delas em nossa função.

rotate: round(20deg, .125turn); /* 0deg */
rotate: round(80deg, .125turn); /* 90deg */

Mas e se eu realmente quiser mais de dois parâmetros?

CSS round()usa um terceiro parâmetro (opcional) no início que permite especificar uma estratégia de arredondamento. Todos os exemplos anteriores usam o valor padrão de nearest. Se desejar esta estratégia, você pode omitir o parâmetro de estratégia ou especificá-lo nearestexplicitamente.

/* the following two both use the nearest strategy */
rotate: round(22.8deg, 1deg); /* 23deg */
rotate: round(nearest, 22.8deg, 1deg); /* 23deg */

Se, em vez disso, quisermos arredondar sempre, adicionamos um parâmetro inicial para especificar nossa estratégia de arredondamento como up. Isso será semelhante ao JavaScript Math.ceil().

font-size: round(up, 20.01rem, 1rem); /* 21rem */
rotate: round(up, 83deg, 5deg); /* 85deg */
rotate: round(up, -83deg, 5deg); /* -80deg */

Da mesma forma, podemos arredondar especificando round(down, ...), assim como o JavaScript permite com Math.floor().

font-size: round(down, 20.999rem, 1rem); /* 20rem */
rotate: round(down, 83deg, 5deg); /* 80deg */
rotate: round(down, -83deg, 5deg); /* -85deg */

Finalmente, há a round(to-zero, ...)estratégia. Este se comporta de forma semelhante a downquando se trabalha com números positivos, mas se comporta como uppara números negativos. Ele selecionará o número do intervalo mais próximo de zero.

rotate: round(to-zero, 83deg, 5deg); /* 80deg */
rotate: round(to-zero, -83deg, 5deg); /* -80deg */

rotate: round(down, 83deg, 5deg); /* 80deg */
rotate: round(down, -83deg, 5deg); /* 85deg */
rotate: round(up, -83deg, 5deg); /* 80deg */