random() and progress() functions

`random()`: Safari 26.2 (refinado no 26.5 com `element-scoped`), Firefox atrás de flag; Chrome em desenvolvimento. `progress()`: Safari 26.0, Firefox 154 atrás de flag, Chrome em desenvolvimento. Não é Baseline.

Chrome noEdge noSafari 26.2 / 26.0Firefox flag

`random(min, max, step)` produz um valor aleatório estável por carregamento de página (ou por elemento com `element-scoped`), para confete espalhado, grades com jitter e layouts orgânicos. `progress(value, start, end)` retorna 0..1 para um valor entre dois limites, um bloco de construção para interpolação fluida.

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: Navegadores sem suporte colocam todos os pontos no `left`/`top` inicial (0); forneça deslocamentos com `:nth-child` como fallback se precisar.

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

Prompt

Use `random(element-scoped, min, max)` para variação orgânica por elemento (campos de partículas, decoração espalhada) e `progress(v, a, b)` para normalizar um valor para 0..1 dentro de calc(). Só Safari (mais flags do Firefox) em 2026-09; forneça fallbacks determinísticos com `:nth-child` para as posições.