The CSS properties and values API module defines a method for registering new CSS properties, defining the property's data type, inheritance behavior, and, optionally, an initial value.
This API expands on CSS custom properties for cascading variables module, which allows authors to define custom properties in CSS using two dash syntax (
The CSS properties and values API is part of the CSS Houdini umbrella of APIs.
Custom properties let you reuse values across a project to simplify complex or repetitive stylesheets.
Basic custom properties are defined in the CSS custom properties for cascading variables module.
The CSS properties and values API expands on that module, enabling adding metadata to custom properties using CSS with the
CSS properties and values API custom property registration is more robust than the more basic CSS cascading variable custom property declaration, especially when it comes to transitioning and animating values as browsers can interpolate between custom values of this type, whereas properties that use two dash syntax (
--) behave more like a string substitution.
To see how custom properties and values can be used via API, hover over the box below.
The box has a backround consisting of a linear gradient from
--stop-color (the custom property) to
The value of
--stop-color is set to
cornflowerblue at first, but when you hover over the box,
--stop-color transitions to
aquamarine over two seconds (
linear-gradient(to right, aquamarine, lavenderblush)).
- Using the CSS properties and values API
- Houdini APIs
Explains what CSS Houdini is and its advantages, along with a list of available APIs and their statuses.
|CSS Properties and Values API Level 1