Counter
A number controlled entirely through CSS state and events.
experimentalstate():on()increment()decrement()content
Random colors
Each click rolls a new hue and picks a new name.
Live previewreal runtime
Press New color, or Tab to it and press Enter or Space.
state
| name | value | previous | changes |
|---|---|---|---|
| Waiting for the preview to start. | |||
events
- Interact with the preview to record events.
How it works
- random()line 6A random value between min and max. The browser’s native random() handles the calls it supports; Reactive CSS runs the rest, and rolls a new value at each event inside a mutation.
- set()lines 6, 7Sets a state to a value. In an :on() rule it is a mutation of the state on the left, --x: set(5), with typed expressions.
Random values at event time. Inside an :on() mutation, random() and pick() are evaluated at each event, so every click gives a new hue and a new word.
Native CSS alternative
Native random() (where the browser supports it) gives each element a random value when styles are computed, and Reactive CSS leaves such calls to the browser. Rolling a new value on a click is what needs the runtime, or JavaScript.
Limitations
random()andpick()outside a mutation are rolled once, not on every event.
Implementation
2 files · 12 linesstyle.cssreactive
/* ---- Reactive CSS -------------------------------------------------------------------------- */.random { --hue: state(200); --mood: state("calm"); }/* random() and pick() inside a mutation are rolled again at every click. */.random .roll:on(click) { --hue: set(random(0, 359, 1)); --mood: set(pick("calm", "bold", "bright", "soft"));}.random .swatch { background-color: hsl(var(--hue) 80% 55%); }.random .hue { content: var(--hue); }.random .mood { content: var(--mood); }state()Function · hover any red tokenMakes each matching element the owner of an independent state with an initial value.Reference →
Source: site/src/catalog/api/random-colors/. style.css from its Reactive CSS divider; the layout above it and the shared api.css run but are not shown.
Next recommendedContext menu →Right-click anywhere on the desk to open a custom menu where you clicked.← All examples
Related
Form mirror
Type in the field and the preview follows; the Clear button resets both.
experimentalstate()bind():on()event()content