CSS Properties and Values API
Baseline
2024
Newly available
Since July 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
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 CSS custom properties. Access this interface through
CSS.registerPropertyin JavaScript. @property-
Defines how a browser should parse CSS custom properties. Access this interface through
@propertyat-rule in CSS.
Examples
The following will register a custom property named --my-color using CSS.registerProperty in JavaScript. --my-color will use the CSS color syntax, it will have a default value of #c0ffee, and it will not inherit its value:
js
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:
css
@property --my-color {
syntax: "<color>";
inherits: false;
initial-value: #c0ffee;
}
Specifications
| Specification |
|---|
| CSS Properties and Values API Level 1 # the-css-property-rule-interface |
| CSS Properties and Values API Level 1 # the-registerproperty-function |
Browser compatibility
api.CSSPropertyRule
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
CSSPropertyRule
|
|
|
|
|
|
|
|
|
|
|
|
|
inherits
|
|
|
|
|
|
|
|
|
|
|
|
|
initialValue
|
|
|
|
|
|
|
|
|
|
|
|
|
name
|
|
|
|
|
|
|
|
|
|
|
|
|
syntax
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
api.CSS.registerProperty_static
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
registerProperty() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support