Experimental
This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The @property
CSS at-rule
is part of the CSS Houdini umbrella of APIs, it allows developers to explicitly define their css custom properties
, allowing for property type checking, setting default values, and define whether a property can inherit values or not.
The @property
rule represents a custom property registration directly in a stylesheet without having to run any JS. Valid @property
rules result in a registered custom property, as if CSS.registerProperty
had been called with equivalent parameters.
Syntax
@property --property-name {
syntax: '<color>';
inherits: false;
initial-value: #c0ffee;
}
A valid @property
rule represents a custom property registration, with the property name being the serialization of the in the rule’s prelude.
@property
rules require a syntax and inherits descriptor; if either are missing, the entire rule is invalid and must be ignored. The initial-value descriptor is optional only if the syntax is the universal syntax definition, otherwise the descriptor is required; if it’s missing, the entire rule is invalid and must be ignored.
Unknown descriptors are invalid and ignored, but do not invalidate the @property
rule.
Examples
Add type checking to --my-color
custom property
, as a color, a default value, and not allow it to inherit its value:
@property --my-color {
syntax: '<color>';
inherits: false;
initial-value: #c0ffee;
}
Using JavaScript CSS.registerProperty
:
window.CSS.registerProperty({
name: '--my-color',
syntax: '<color>',
inherits: false,
initialValue: '#c0ffee',
});
Formal syntax
@property <custom-property-name> {
<declaration-list>
}
Specifications
Specification | Status | Comment |
---|---|---|
CSS Properties and Values API Level 1 | Working Draft | Initial definition. |
Browser compatibility
BCD tables only load in the browser