The CSS stepped worth math capabilities are actually in Baseline 2024  |  Weblog  |  internet.dev

All main engines now help the CSS stepped worth math capabilities—
spherical(),
mod(),
and rem().

The stepped worth capabilities all remodel a given worth in response to one other
step worth.

The spherical() perform

The spherical() perform takes a worth to be rounded,
a rounding interval, and an elective rounding technique.
The worth is rounded in response to the rounding technique,
to the closest integer a number of of the rounding interval.

Both the worth to be rounded, or the rounded interval, ought to be a CSS
customized property. Whereas it is legitimate to hardcode each values, there’s little
level rounding a quantity for those who might calculate the worth your self.

The next CSS rounds the worth of --my-font-size, to the interval of 1rem.

font-size: spherical(var(--my-font-size), 1rem);

The default rounding technique is nearest. The earlier instance together with the
rounding technique is as follows:

font-size: spherical(nearest,var(--my-font-size), 1rem);

The doable values for the rounding technique are:

• up: Equal to JavaScript Math.ceil() technique. Rounds the worth up
  to the closest complete a number of of the rounding interval.
• down: Equal to JavaScript Math.ground() technique. Rounds the worth
  right down to the closest complete a number of of the rounding interval.
• nearest (default): Equal to JavaScript Math.spherical(). Rounds the
  worth up or down, to the closest complete a number of of the rounding interval.
• to-zero: Equal to JavaScript Math.trunc() technique. Rounds the worth
  to the closest integer a number of of the rounding interval nearer to zero.

Study extra about spherical() in
The New CSS Math: spherical(),
by Dan Wilson.

The rem() and mod() capabilities

The rem() and mod() CSS capabilities work in an identical solution to the JavaScript
the rest operator (%). They take two values, the primary (the dividend) is split by the second (the divisor),
and the rest is returned.

margin: rem(18px, 5px); /* returns 3px */

The distinction between the 2 capabilities is that rem() at all times takes the signal
of the dividend, subsequently if the primary worth is constructive the returned worth
will probably be constructive. The mod() perform takes the signal of the divisor.

Study extra about rem() and mod() in
The New CSS Math: rem() and mod(),
by Dan Wilson.