Stepped value functions: round(), mod(), rem(), abs(), sign()

Baseline 2024 (round/mod/rem: Chrome 125, Safari 15.4, Firefox 118; abs/sign: Chrome 125, Safari 15.4, Firefox 118).

Chrome 125Edge 125Safari 15.4Firefox 118

Math in CSS beyond calc(): snap a fluid value to a grid (`round(nearest, 1.2rem, 4px)`), wrap values (`mod`), get magnitudes and signs. Useful for baseline grids and computed layouts without JS.

Font size snaps to the 4px baseline grid as the viewport changes.

CSS

.fx-018{
  --fluid:calc(1rem + 1vw);
  font-size:round(nearest,var(--fluid),4px);
  line-height:round(up,1.4em,4px);
  padding:mod(30px,8px) 0;     /* 6px */
  font-family:system-ui;
}

HTML

<p class="fx-018">Font size snaps to the 4px baseline grid as the viewport changes.</p>

Fallback: Provide a plain `font-size: clamp()` before the rounded value; unsupported browsers keep it.

Source: developer.mozilla.org/en-US/docs/Web/CSS/round

Prompt

When a computed length must land on a grid, wrap it: `round(nearest, <value>, 4px)`; use `round(up|down, ...)` for ceilings and floors, `mod()` for wrapping and `abs()`/`sign()` for direction-aware offsets. These are Baseline 2024 so no guard is needed, but keep a plain fallback declaration for very old browsers.