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.
@property --propery-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.
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', });
{{csssyntax}}
Specification | Status | Comment |
---|---|---|
CSS Properties and Values API Level 1 | Working Draft | Initial definition. |
Desktop | ||||||
---|---|---|---|---|---|---|
@property
|
85 | 85 | No | No | 71 | No |
Mobile | ||||||
---|---|---|---|---|---|---|
@property
|
85 | 85 | No | No | No | No |
© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@property