CSS Properties and Values API
Checking compatibility...
Register and manage custom CSS properties with type checking, inheritance control, and default values. Enable smooth transitions and animations for custom properties.
Note
When you register a custom property, it will be available in the browser's CSS engine. It's not possible to register a property that already exists - you'll get an error when you click "Run Example" more than once.
Register Custom Property
This example shows how to create a CSS variable that only accepts colors and has a default value, making it more reliable than standard CSS variables.
=
=
=
=
=
=
Output
Click Run to see output...Animate Custom Property
This example demonstrates how registered CSS properties can smoothly transition between values, creating fluid animations that aren't possible with regular CSS variables.
=
=
=
=
=
=
Output
Click Run to see output...Property Validation
This example shows how registered properties can automatically check if values are valid, helping you catch and prevent styling errors before they cause visual problems.
=
=
=
=
=
=
Output
Click Run to see output...