@property: Next-gen CSS variables now with universal browser support

July 29, 2024

Get ready for a CSS power-up! The @property rule, part of the CSS Houdini umbrella of APIs, is now fully supported across all modern browsers. This game-changing feature unlocks new levels of control and flexibility for CSS custom properties (also known as CSS variables), making your stylesheets smarter and more dynamic.

Source: @property: Next-gen CSS variables now with universal browser support

We’ve long been able to make out down custom values in CSS–defining tokens we can use in place of values throughout our CSS.

But we can now create our own properties–give them meaningful names, and define the type of value they are allowed to take.

Then we can use these properties anywhere we can use a CSS property (like color, or border-radius, or position).

Intrigued? Una Kravets has a comprehensive rundown.