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

Status: Baseline 2024 (round/mod/rem: Chrome 125, Safari 15.4, Firefox 118; abs/sign: Chrome 125, Safari 15.4, Firefox 118).  
Quelle: https://developer.mozilla.org/en-US/docs/Web/CSS/round  
Seite: https://designforai.dev/de/css/stepped-value-functions

Mathe in CSS jenseits von calc(): einen fluiden Wert auf ein Raster snappen (`round(nearest, 1.2rem, 4px)`), Werte umbrechen (`mod`), Beträge und Vorzeichen ermitteln. Nützlich für Baseline-Raster und berechnete Layouts ohne JS.

## HTML

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

## CSS

```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;
}
```

Fallback: Setze ein einfaches `font-size: clamp()` vor den gerundeten Wert; Browser ohne Unterstützung behalten es.

## Prompt

Wenn eine berechnete Länge auf einem Raster landen muss, wickle sie ein: `round(nearest, <value>, 4px)`; nutze `round(up|down, ...)` für Auf- und Abrunden, `mod()` für Umbrüche und `abs()`/`sign()` für richtungsabhängige Versätze. Diese sind Baseline 2024, also ist keine Absicherung nötig, aber behalte eine einfache Fallback-Deklaration für sehr alte Browser.