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 a CSS custom properties. Access this interface through CSS.registerProperty in JavaScript.

@property

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

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

No specification found

No specification data found for api.CSS.registerProperty.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser compatibility

BCD tables only load in the browser

See also