@property
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
css
@property --property-name {
syntax: "<color>";
inherits: false;
initial-value: #c0ffee;
}
Descriptors
syntax
-
Describes the allowable syntax for the property.
inherits
-
Controls whether the custom property registration specified by
@property
inherits by default. initial-value
-
Sets the initial value for the property.
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:
css
@property --my-color {
syntax: "<color>";
inherits: false;
initial-value: #c0ffee;
}
Using JavaScript CSS.registerProperty
:
js
window.CSS.registerProperty({
name: "--my-color",
syntax: "<color>",
inherits: false,
initialValue: "#c0ffee",
});
Formal syntax
@property =
@property <custom-property-name> { <declaration-list> }
Specifications
Specification |
---|
CSS Properties and Values API Level 1 # at-property-rule |
Browser compatibility
BCD tables only load in the browser