viewport()

functionsince 0.1compiles to native CSS

Compiles to native 100dvw or 100dvh. No runtime.

On this page · 8 sections+

Syntax Parameters Return value Example Behavior Supported contexts Limitations Related

Syntax

viewport(width | height)

Parameters

dimensionwidth or heightrequired: Same as innerWidth / innerHeight, scrollbars included.

Return value

100dvw or 100dvh. Inside a mutation, innerWidth or innerHeight in px at the event.

Example

spread.cssreactive

.dot {  translate: random(0px, viewport(width)) 0;}

random()Function · hover any red tokenA 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.Reference →

Behavior

Updated natively by the browser.
Inside a mutation of an :on() rule, it is a snapshot in px: --w: set(viewport(width)) stores the width at the moment of the event.

Supported contexts

Any value, typically nested in another function.
The expression of an :on() mutation.

Limitations

On its own, writing 100dvw directly is the same.

native equivalent · 100dvw / 100dvh

random()element()

Experimental · syntax may change between minor versions