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

Get fresh for a CSS power-up! The @property rule, portion of nan CSS Houdini umbrella of APIs, is now afloat supported crossed each modern browsers. This game-changing characteristic unlocks caller levels of power and elasticity for CSS civilization properties (also known arsenic CSS variables), making your stylesheets smarter and much dynamic.

The benefits of @property

• Semantic meaning: Use @property to specify a type (syntax) for your civilization properties. This tells nan browser what benignant of information your civilization spot holds (for example, colors, lengths, aliases numbers), preventing unexpected results and supporting caller possibilities for illustration animating gradients.
• Fallback values: No much disappearing styles! Use @propertyto group an first worth for a civilization property. If an invalid worth is assigned later, nan browser gracefully uses your defined fallback.
• Improved correction handling: Enhanced type information and nan expertise to group fallbacks unfastened up caller opportunities for testing and validation straight wrong your CSS.

Create precocious civilization properties

To create a "standard" civilization property, group a spot sanction prepended by a -- and springiness this spot a value. The worth of these civilization properties is parsed arsenic a drawstring by nan browser.

The pursuing illustration shows really a default (string-based) civilization spot is initialized.

To summation nan benefits of these "advanced civilization properties", including semantics beyond a string, registry your CSS civilization spot pinch @property.

In this illustration nan aforesaid civilization spot is initialized pinch @property.

The civilization spot initialized pinch @property provides overmuch much item than conscionable a sanction and value. It includes nan syntax type and sets inheritance to existent aliases false.

The use of this attack is that pinch nan modular property, you expect that spot to incorporate a colour arsenic a value, and are going to usage that colour elsewhere successful nan stylesheet. If personification were to update that spot to person a number arsenic a value, immoderate usage of nan spot elsewhere would fail. Using @property location is simply a fallback colour defined, on pinch a syntax that declares this spot must clasp a colour value. Should a non-color worth beryllium used, nan fallback would beryllium utilized instead.

Demo: Twinkling gradient background

One of nan neat applications of @property is nan soft animation of properties that were antecedently intolerable to transition, for illustration gradients, which are perceived arsenic images by nan browser. However, if you springiness variables syntactic meaning via @property, these tin beryllium utilized successful a gradient statement. Now you are describing an animation betwixt 2 declared values wrong nan gradient, enabling animation. Take nan pursuing example: a paper pinch a subtle inheritance animation that consists of 2 radial gradients which displacement colour connected different timelines:

This tin beryllium achieved by mounting up your civilization spot values arsenic colors:

Then, you entree them to create nan first gradient background:

Additionally, you past update nan values successful keyframes:

And animate each:

Conclusion

CSS registered civilization properties are a very powerful characteristic that extends nan CSS connection by providing meaning and discourse to CSS variables. Now, pinch @property landing successful baseline, this CSS superpower is increasing successful strength.

Additional Reading

• MDN Web Docs
• @property: giving superpowers to CSS variables