web api overview
CSS Properties and Values API
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.
- : Defines how a browser should parse CSS custom properties. Access this interface through
@property- : Defines how a browser should parse CSS custom properties. Access this interface through
@propertyat-rule in CSS.
- : Defines how a browser should parse CSS custom properties. Access this interface through
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:
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
SpecificationsStandards references are available on the canonical MDN page.
Browser compatibility
Browser compatibilityCompatibility data is available on the canonical MDN page.