random() and progress() functions

`random()`: Safari 26.2 (verfeinert in 26.5 mit `element-scoped`), Firefox hinter Flag; Chrome in Entwicklung. `progress()`: Safari 26.0, Firefox 154 hinter Flag, Chrome in Entwicklung. Nicht Baseline.

Chrome noEdge noSafari 26.2 / 26.0Firefox flag

`random(min, max, step)` liefert einen stabilen Zufallswert pro Seitenladen (oder pro Element mit `element-scoped`), für verstreutes Konfetti, gejitterte Raster und organische Layouts. `progress(value, start, end)` gibt 0..1 für einen Wert zwischen zwei Grenzen zurück, ein Baustein für fluide Interpolation.

CSS

.fx-059 {
  position: relative;
  height: 120px;
  background: #0f172a;
  border-radius: 12px;
  overflow: hidden
}
.fx-059 i {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #facc15;
    left: random(element-scoped,5%,95%);
  top: random(element-scoped,10%,85%);
    scale: random(element-scoped,.5,1.5);
    opacity: progress(random(element-scoped,0,1),0,1)
}

HTML

<div class="fx-059"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>

Fallback: Browser ohne Unterstützung setzen alle Punkte auf das initiale `left`/`top` (0); liefere bei Bedarf `:nth-child`-Versätze als Fallback.

Quelle: webkit.org/blog/17938/webkit-features-for-safari-26-5/ and https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/154

Prompt

Nutze `random(element-scoped, min, max)` für organische Variation pro Element (Partikelfelder, verstreute Dekoration) und `progress(v, a, b)`, um einen Wert innerhalb von calc() auf 0..1 zu normalisieren. Stand 2026-09 Safari-only (plus Firefox-Flags); liefere deterministische `:nth-child`-Fallbacks für die Positionen.