`round(), mod(), rem(), abs() și sign()` în CSS

Funcții și unități CSS round(), mod(), rem(): Chrome 125, Firefox 118, Safari 15.4; abs(), sign(): Chrome 138, Firefox 118, Safari 15.4

Funcții matematice care rotunjesc o valoare la un pas dat, calculează restul împărțirii sau valoarea absolută, direct în CSS.

Sintaxă CSS

width: round(up, 37vw, 10px);
height: round(nearest, 13.7rem, 1rem);
rotate: mod(370deg, 360deg);   /* 10deg */
margin: rem(-18px, 5px);      /* -3px */
padding: abs(var(--decalaj));

Ce face `round(), mod(), rem(), abs() și sign()`

round(strategie, valoare, pas) rotunjește valoarea la cel mai apropiat multiplu al pasului. Strategiile sunt nearest (implicit, cel mai apropiat), up (în sus), down (în jos) și to-zero (spre zero). Exemplu: round(up, 37px, 10px) dă 40px.

mod(a, b) și rem(a, b) calculează restul împărțirii lui a la b. Diferența apare la numere negative: rezultatul lui mod() are semnul lui b (mod(-18px, 5px) = 2px), iar cel al lui rem() are semnul lui a (rem(-18px, 5px) = -3px). Atenție: funcția rem() nu are legătură cu unitatea rem.

abs(x) întoarce valoarea fără semn, iar sign(x) întoarce -1, 0 sau 1. Sunt utile mai ales împreună cu variabile CSS ale căror valori pot fi negative.

Valori uzuale

Valoare	Descriere
`round(nearest \| up \| down \| to-zero, A, B)`	Rotunjește A la un multiplu al lui B, după strategia aleasă.
`mod(A, B)`	Restul împărțirii, cu semnul lui B.
`rem(A, B)`	Restul împărțirii, cu semnul lui A.
`abs(A)`	Valoarea absolută a lui A.
`sign(A)`	-1, 0 sau 1, după semnul lui A (rezultatul este un număr fără unitate).

Exemple

Exemplul 1: Înălțimi aliniate la o grilă de 8px

Indiferent de mărimea calculată, rezultatul este mereu un multiplu de 8px, ca în sistemele de design.

.bloc-continut {
  padding: round(up, 2.3vw, 8px);
  min-height: round(nearest, 30vh, 8px);
}

Efect vizual în browser

Pe un ecran lat de 1280px, 2.3vw ar da 29.44px, iar padding-ul blocului „Program muzeu: 10:00–18:00” devine 32px. Pe un ecran de 375px, 2.3vw = 8.6px și padding-ul devine 16px. Valorile sunt mereu multipli de 8.

Exemplul 2: Unghi normalizat și distanță pozitivă din aceeași variabilă

Variabila poate primi orice valoare din JavaScript; mod() și abs() o aduc într-un interval util.

.indicator-vant {
  --directie: -450deg;
  --decalaj: -24px;
  rotate: mod(var(--directie), 360deg);
  margin-left: abs(var(--decalaj));
}