TheCSS Properties and Values API — part of theCSS Houdini umbrella of APIs — allows developers to explicitly define theirCSS 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 parseCSS custom properties. Access this interface throughCSS.registerProperty inJavaScript.

@property

Defines how a browser should parseCSS custom properties. Access this interface through@propertyat-rule inCSS.

Examples

The following will register acustom property named--my-color usingCSS.registerProperty inJavaScript.--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 inCSS using the@propertyat-rule:

@property --my-color {  syntax: "<color>";  inherits: false;  initial-value: #c0ffee;}

Specifications

Browser compatibility

api.CSSPropertyRule

api.CSS.registerProperty_static

See also

• Using the CSS properties and values API
• CSS Painting API
• CSS Typed Object Model
• Houdini APIs