random() and progress() functions

`random()`: Safari 26.2 (refinado en 26.5 con `element-scoped`), Firefox detrás de un flag; Chrome en desarrollo. `progress()`: Safari 26.0, Firefox 154 detrás de un flag, Chrome en desarrollo. No es Baseline.

Chrome noEdge noSafari 26.2 / 26.0Firefox flag

`random(min, max, step)` da un valor aleatorio estable por carga de página (o por elemento con `element-scoped`), para confeti disperso, rejillas con vibración y layouts orgánicos. `progress(value, start, end)` devuelve 0..1 para un valor entre dos límites, un bloque básico para interpolación 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: Los navegadores sin soporte colocan todos los puntos en el `left`/`top` inicial (0); proporciona desplazamientos con `:nth-child` como respaldo si hace falta.

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

Prompt

Usa `random(element-scoped, min, max)` para variación orgánica por elemento (campos de partículas, decoración dispersa) y `progress(v, a, b)` para normalizar un valor a 0..1 dentro de calc(). Solo Safari (más flags en Firefox) en 2026-09; proporciona respaldos deterministas con `:nth-child` para las posiciones.