Cascade & custom properties

The all shorthand, which resets every property at once, and custom properties, the author-named --* properties that carry values for var() to read. The keywords all takes are described under CSS-wide keywords; registering a typed custom property is done with @property; cascade layers and scoping are under @layer and @scope.

Resetting

`all`

Shorthand that sets every CSS property on an element to one CSS-wide keyword, except direction, unicode-bidi and custom properties. Use it to strip inherited and author styles from a component and start from a known base.

Syntax	`initial \| inherit \| unset \| revert \| revert-layer \| revert-rule`
Initial	See individual properties
Applies to	See individual properties
Inherited	See individual properties
Percentages	See individual properties
Animation	See individual properties
Support	Chrome 37 · Firefox 27 · Safari 9.1
Spec	css-cascade-5

Value	Effect
`initial`	Every property takes its initial value from the spec, so even `display` becomes `inline`.
`inherit`	Every property takes its parent's value.
`unset`	Inherited properties inherit; the rest take their initial value.
`revert`	Every property falls back to the browser's default style sheet, as if no author styles applied.
`revert-layer`	Every property falls back to the value from the previous cascade layer.
`revert-rule`	Every property falls back to the value it would have without the rule that sets `all`.

button.bare { all: unset; cursor: pointer; }
button.bare:focus-visible { outline: 2px solid; }

A button with no browser styling. unset also removes the focus ring, so put one back.

Custom properties

`--*`

Any property whose name starts with two dashes, such as --accent, is a custom property. It does nothing by itself; it holds a value that other declarations read with var(). Names are case-sensitive, so --Accent and --accent are different properties.

Syntax	`<declaration-value>?`
Initial	The guaranteed-invalid value
Applies to	All elements and all pseudo-elements
Inherited	Yes
Animation	Discrete (unless registered with `@property`)
Support	Chrome 49 · Firefox 31 · Safari 9.1
Spec	css-variables-1

<declaration-value> means almost any sequence of tokens, and the ? means the value may even be empty. The browser does not check it against any grammar when the declaration is parsed; it is only checked once var() substitutes it into a real property. If the result is invalid there, that property behaves as unset.

The initial value, the guaranteed-invalid value, makes any var() that reads it use its fallback. The CSS-wide keywords work as on any other property: initial sets a custom property back to the guaranteed-invalid value.

:root { --accent: oklch(55% 0.2 250); }
.button { background: var(--accent); }
.button.danger { --accent: crimson; }

A theme value set once on the root and overridden for one variant; descendants inherit it.

Registering a custom property with @property gives it a type, an initial value and a choice of whether it inherits. A registered property is validated against its type and can be transitioned and animated smoothly.

@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.spinner { background: conic-gradient(from var(--angle), teal, transparent); transition: --angle 1s; }

Once typed as an angle, --angle interpolates, so the gradient can rotate.