Beto's Photo

CSS Custom Properties with @property

Have you heard about the CSS @property statement?

šŸ“£ @property is a CSS Houdini at-rule that allows us to configure CSS custom properties by data type using the syntax field, default values using the initial-value field, and set if it allows inheritance.

@property --colorPrimary { syntax: "<color>"; initial-value: magenta; inherits: false; } body { /* Fallback for browsers without @property support. */ --colorPrimary: magenta; } .text { color: var(--colorPrimary); }

šŸŖ„ The nicest aspect about @property is the capability to enhance CSS dynamics through high-level declarations with simplicity and certain performance enhancements.

šŸ”¬ Some use cases for @property statement are data type validation on CSS and animations.

@property --status { inherits: false; initial-value: 0%; syntax: '<percentage>'; } .progress-bar { width: var(--status); height: 5px; background: gold; animation: progress 2s forwards; } @keyframes progress { to { --status: 100%; } }

šŸ˜‹ Really cool, right?