This is an experimental technologyCheck the Browser compatibility table carefully before using this in production.
CSS Properties and Values APICSS Houdinicss custom properties
Interfaces
CSS.registerProperty- Defines how a browser should parse a
css custom properties. Access this interface throughCSS.registerPropertyin JavaScript. @property- Defines how a browser should parse a
css custom properties. Access this interface through@propertyat-rule in CSS.
Examples
The following uses CSS.registerProperty in JavaScript to type a css custom properties, --my-color, as a color, give it a default value, and not allow it to inherit its value:
window.CSS.registerProperty({
name: '--my-color',
syntax: '<color>',
inherits: false,
initialValue: '#c0ffee',
});The same registration can take place in CSS using the @property at-rule:
@property --my-color {
syntax: '<color>';
inherits: false;
initial-value: #c0ffee;
}Specifications
| Specification | Status | Comment |
| CSS Properties and Values API Level 1 | Working Draft | Initial definition. |
Browser compatibility
See individual interfaces
See Also
CSS Properties and Values API by Mozilla Contributors is licensed under CC-BY-SA 2.5.
