Captured Custom Properties — Roma’s Unpolished Posts
September 4, 2024
Registered custom properties are invaluable, as they unlock many things previously not possible.Among other use cases (I recommend reading the Providing Type Definitions for CSS with @property article by Stephanie Eckles), there are two useful effects we can use registered custom properties for:
Enabling animations of some custom property.
Capturing the value of the custom property on the element itself.
Source: Captured Custom Properties — Roma’s Unpolished Posts
I imagine most front end developers have long been aware of and hopefully used CSS Custom Properties (what we typically call CSS Variables)
But we can also register Custom Properties giving them a type, initial value and whether they are inherited. In essence we are creating our own types of property in CSS.
By registering our custom property, the value is now evaluated at the definition, so instead of passing down the abstract 1.5em, we now pass down the exact value of the 1.5em as calculated on the .example2 element!
Roma Komarov digs in deeper here.
