Context menu
Right-click anywhere on the desk to open a custom menu where you clicked.
experimental:on()prevent()event()focus:
State history
A score that remembers its last value and which way it moved.
Live previewreal runtime
Press + and − in any order.
state
| name | value | previous | changes |
|---|---|---|---|
| Waiting for the preview to start. | |||
events
- Interact with the preview to record events.
How it works
- previous()line 8The value of a state before its last effective change.
- direction()lines 11, 12, 13, 14Whether the last change of a number or dimension state went up, nowhere or down.
- :changed()line 17Matches briefly after an observed change of the nearest state, until the animations it started have finished.
Every state remembers its value before the last change. previous() reads it, direction() tells whether the last change went up or down, and :changed() matches briefly after each change.
Native CSS alternative
None: CSS keeps no history of values.
Limitations
- History is one step deep.
- The bump does not play under
prefers-reduced-motionin the site previews.
Implementation
2 files · 17 linesstyle.cssreactive
/* ---- Reactive CSS -------------------------------------------------------------------------- */.history { --score: state(0); }.history .up:on(click) { --score: increment(1); }.history .down:on(click) { --score: decrement(1); }.history .now { content: var(--score); }.history .prev { content: previous(--score); } /* the value before the last change *//* direction(): 1 after a rise, -1 after a fall, 0 before any change */.history .word { content: when(direction(--score) > 0, "up", "nowhere yet"); }.history:when(direction(--score) < 0) .word { content: when(direction(--score) < 0, "down", ""); }.history:when(direction(--score) > 0) .arrow { opacity: 1; color: #1a7f37; }.history:when(direction(--score) < 0) .arrow { opacity: 1; color: var(--accent); rotate: 180deg; }/* :changed(): matches right after each change, until its animation ends */.history:changed(--score) .now { animation: bump 250ms; }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/state-history/. style.css from its Reactive CSS divider; the layout above it and the shared api.css run but are not shown.
Related
Counter
A number controlled entirely through CSS state and events.
experimentalstate():on()increment()decrement()content