CSS Properties and Values API

{{DefaultAPISidebar("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

• {{domxref('CSS/registerProperty_static', 'CSS.registerProperty')}} 
  • : Defines how a browser should parse CSS custom properties. Access this interface through {{domxref('CSS/registerProperty_static', 'CSS.registerProperty')}}  in JavaScript.
• {{cssxref('@property')}} 
  • : Defines how a browser should parse CSS custom properties. Access this interface through {{cssxref('@property')}}  at-rule in CSS.

Examples

The following will register a custom property named --my-color using {{domxref('CSS/registerProperty_static', '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 {{cssxref('@property')}}  at-rule:

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

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

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