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?