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

Matemáticas en CSS más allá de calc(): ajustar un valor fluido a una rejilla (`round(nearest, 1.2rem, 4px)`), envolver valores (`mod`), obtener magnitudes y signos. Útil para rejillas de línea base y layouts calculados sin 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: Proporciona un `font-size: clamp()` plano antes del valor redondeado; los navegadores sin soporte se quedan con él.

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

Prompt

Cuando una longitud calculada deba caer en una rejilla, envuélvela: `round(nearest, <valor>, 4px)`; usa `round(up|down, ...)` para techos y suelos, `mod()` para envolver y `abs()`/`sign()` para desplazamientos que dependen de la dirección. Son Baseline 2024, así que no hace falta protección, pero conserva una declaración plana de respaldo para navegadores muy antiguos.