Advanced CSS Custom Properties: Key Vocabulary

@property is a CSS at-rule (mirroring CSS.registerProperty()) that gives a custom property a declared syntax, initial-value, and inherits flag. Registered properties can be transitioned and animated because the browser knows their type — unregistered properties are opaque strings that cannot be interpolated.

The syntax descriptor defines the property's type using CSS value definition syntax. For example syntax: "<color>" tells the browser to parse the value as a color, enabling animated transitions between color values. syntax: "*" opts back into the untyped, non-interpolatable behaviour.

initial-value is mandatory when inherits: false and required for non-universal syntax values. It defines what the custom property resolves to when no value has been cascaded. Without it, the browser cannot guarantee a valid value for type-checked interpolation, which is why it's required for animatable registered properties.

Setting inherits: false makes the registered custom property non-inheriting. Each element resolves independently from initial-value unless the property is explicitly set on that element. This is useful for properties like animation progress counters where you do not want child elements to pick up a parent's value.

CSS.registerProperty() is the JavaScript API equivalent of the @property at-rule, available in the CSS Houdini Properties and Values API. It accepts the same options — name, syntax, inherits, initialValue — and must be called before any stylesheet uses the property to have effect.