The CSS @property at-rule registers a custom property so the browser understands its data type, inheritance behavior, and initial value. That information enables type checking and smooth transitions of the custom property itself. section 15.5 section 15.6
A definition must specify three characteristics:
- syntax: the permitted data type, such as <angle>, <length>, <number>, <percentage>, or <length-percentage>; section 15.5
- inherits: whether the custom property inherits from parent elements by default; section 15.5
- initial-value: the value used when no value is declared or when a declaration has an invalid type. section 15.5
Transition a custom hue
Define --hue as an angle, prevent inheritance, and give it a 0deg initial value. A button can then transition --hue from 314deg to 250deg on hover while using it in an OKLCH background color. Without @property, the custom-property transition does not work. section 15.5
For example, --hue: 15% is invalid when syntax is "<angle>"; the browser ignores that declaration and uses the initial value of 0deg. Firefox did not support @property as of mid-2024, so check current support before making it essential. section 15.5
