random(min, max, step) je nová CSS funkce, která vrací náhodnou hodnotu v zadaném rozsahu a jednotkách. Lze generovat náhodné rozměry, úhly, barvy i pozice bez JavaScriptu. Volitelný step určuje krok (jde tak generovat např. jen sudá čísla).

Pokud se následující tvar po každém načtení zobrazí jinak velký, váš prohlížeč random podporuje:

Základní použití

.procenta {
  top: random(0%, 100%);
  left: random(0%, 100%);
}

.pixely {
  width: random(100px, 200px);
}

.stupne {
  filter: hue-rotate(random(0deg, 360deg));
}

Sdílení náhodnosti

Stejnou náhodnou hodnotu lze sdílet pomocí identifikátoru (začíná --) nebo speciálního klíčového slova element-shared.

Jde tak vygenerovat třeba náhodný čtverec (výška i šířka budou náhodně stejné číslo):

.square {
  width: random(--side, 100px, 200px);
  height: random(--side, 100px, 200px);
}

Klíčové slovo element-shared zajistí, že všechny prvky s danou třídou budou stejně náhodně velké:

.rectangles {
  width: random(element-shared, 100px, 200px);
  height: random(element-shared, 80px, 160px);
}

Kombinace identifikátoru s element-shared vygeneruje jednu společnou náhodnou hodnotu pro všechny prvky i deklarace, kde se použije. V tomto příkladu tedy všechny .global-square budou stejně velké čtverce (šířka = výška) se stejnou náhodnou stranou v rozsahu 120–240 px.

.global-square {
  width: random(--g element-shared, 120px, 240px);
  height: random(--g element-shared, 120px, 240px);
}

Animace a interakce

@keyframes spin {
  from { rotate: 0deg; }
  to {
    rotate: 5turn;
    rotate: random(1turn, 5turn);
  }
}

V podporovaných prohlížečích by se měl po každém načtení stránky kruh zastavit na jiném místě.

Kdy se hodnota mění

Hodnota se generuje při výpočtu stylů. Mění se při přepočtu stylů elementu (změna tříd, stavů, media queries apod.).

Progressive enhancement

Pro nepodporované prohlížeče jde buď použít klasicky @supports, nebo využít toho, že neznámou hodnotu prohlížeče ignorují:

/* Fallback-první deklarace – starší prohlížeče použijí první hodnotu */
.badge { opacity: 0.8; opacity: random(0.6, 1); }

/* Alternativně explicitně přes @supports */
@supports (opacity: random(0, 1)) {
  .badge { opacity: random(0.6, 1); }
}

@supports not (opacity: random(0, 1)) {
  .badge { opacity: 0.8; }
}

Příklady

Je otázka, k čemu se generování náhodného čísla v CSS hodí.

Určitě by tak šel po desetiletích konečně udělat starý dobrý efekt sněžení na stránce čistě pomocí CSS.

Generátor náhodného čísla 0–10

V podporovaných prohlížečích se po každém načtení zobrazí jiné číslo.

Bohužel nejde random vypsat pomocí content.

Sněžení bez JS

Ale představit si dokážu i drobné transformace UI.

Bez random

CSS random jde snadno nahradit běžným generování náhodného čísla, které se může nastavit jako CSS proměnná, a fungovat s tím velmi podobně.

Odkazy jinam

• Rolling the Dice with CSS random()