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.registerProperty in JavaScript.
@property: Defines how a browser should parse CSS custom properties. Access this interface through @property at-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:

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

	Desktop						Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`CSS_Properties_and_Values_API`	78	79	128	65	16.4	78	128	56	16.4	12.0	78

	Desktop						Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`CSS_Properties_and_Values_API`	85	85	128	71	16.4	85	128	60	16.4	14.0	85
`inherits`	85	85	128	71	16.4	85	128	60	16.4	14.0	85
`initialValue`	85	85	128	71	16.4	85	128	60	16.4	14.0	85
`name`	85	85	128	71	16.4	85	128	60	16.4	14.0	85
`syntax`	85	85	128	71	16.4	85	128	60	16.4	14.0	85

api.CSSPropertyRule

BCD tables only load in the browser

api.CSS.registerProperty_static