Typed custom properties without JavaScript
Custom properties were strings. You couldn't animate them or get browser validation. @property gives you a type, so the browser can interpolate and validate.
2.wheel {
3 background: hsl(var(--hue), 80%, 50%);
4 transition: --hue .3s; /* ignored, not interpolable */
5}
2 syntax: "<angle>";
3 inherits: false;
4 initial-value: 0deg;
5}
6.wheel {
7 background: hsl(var(--hue), 80%, 50%);
8 transition: --hue .3s;
9}
Animatable
Transition or animate custom properties. The browser interpolates by type.
Validated
Invalid values fall back to initial-value. No silent string surprises.
No JS
No script to parse or tween. Pure CSS for hue, length, or number transitions.
How it works
Custom properties were untyped. The browser stored them as strings, so you couldn't transition from 0 to 360 for a hue, and invalid values weren't caught. You needed JS to tween or validate.
@property --name { syntax: "<angle>"; inherits: false; initial-value: 0deg; } registers the variable with a type. The browser can interpolate it in transitions and animations and will reject invalid values. Syntax can be <length>, <color>, <number>, and more.