CSS Properties and Values API

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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:

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

Specification
CSS Properties and Values API Level 1 (CSS Properties and Values API 1)
# the-registerproperty-function

Browser compatibility

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CSS_Properties_and_Values_API