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?
Top comments (2)
related: dev.to/afif/we-can-finally-animate...
Cool!!! Amazing demos, Temani 👏