Study · CSS · Values

Branching and progress in CSS

Choose a state and move a value through a range with CSS-native expressions.

The CSS if() function chooses one value for a property from a condition. Switch between two states to change the specimen's surface; the HTML still holds the state, and CSS supplies the matching appearance.

38%

if() stateprogress() value 38%

background: if(style(--state: ready): var(--study-specimen-background); else: var(--study-control-background));
scale: progress(var(--progress), 0, 100);

CSS support for if() could not be checked. The default state remains visible.

CSS support for progress() could not be checked. The default fill remains visible.

progress() converts a value between a start and end into a number from zero to one. The range control updates that input, and the result scales the circle and its percentage together, from nothing at zero to full size at 100. A regular calculation remains in the stylesheet as a fallback.

Content that sizes itself

Querying a component state

Navigation that follows the scroll

Anchored content that knows when to hide

Branching and progress in CSS

Counting siblings in CSS

Randomness in CSS

A stateful scroll surface

Typed HTML attributes in CSS

Layout primitives in CSS

Colour relationships in CSS

Styling a native select

Shapes and CSS functions

Placement and scoped transitions

A colour axis with contrast

Geometry with CSS

Shaping corners with superellipses

Theme

Branching and progress in CSS