The CSS Properties and Values API — part of the CSS Houdini umbrella of APIs — allows developers to explicitly define their css custom properties
, allowing for property type checking, default values, and properties that do or do not inherit their value.
Interfaces
CSS.registerProperty
- Defines how a browser should parse a
css custom properties
. Access this interface throughCSS.registerProperty
in JavaScript. @property
- Defines how a browser should parse a
css custom properties
. Access this interface through@property
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 following @property
:
@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