Chrome 156 stops throwing away @property rules that skip a descriptor
Chrome 156, scheduled for stable on October 20, changes how it treats incomplete @property rules. According to Chrome’s release notes, any descriptor can now be left out: a missing syntax becomes the universal syntax, a missing inherits means the property inherits, and a missing initial-value becomes the guaranteed-invalid value. Until now a rule that skipped syntax or inherits was invalid, and browsers ignored all of it.
What happens today
We registered three properties in Chromium 141, a build from before the change: one complete rule, one without inherits and one without syntax. Only the complete rule survived parsing. The other two did not appear in the page’s style sheet at all, so their properties stayed unregistered and their initial values never applied. Nothing is logged to the console, which is why this mistake can take a while to find.
Why you should still write all three
First, Chrome is ahead. MDN’s compatibility data has no separate entry for optional descriptors yet, while Firefox (since 128) and Safari (since 16.4) support @property itself, so an incomplete rule is still thrown away wherever the change has not landed. Second, the defaults are rarely what you want. A property with the universal syntax accepts any value but cannot be interpolated, so a transition or animation on it jumps from one value to the next instead of moving. A typed syntax is the reason to register a property you plan to animate.
The rotating gradient border, done right
The classic use is an animated gradient border: register an angle, then animate it. Our Gradient Border tool generates the mask-based border; to make it spin, add a complete registration and animate the angle:
Without the registration, or with an incomplete one in a browser that drops it, --angle is an ordinary custom property and the gradient snaps from one keyframe to the next instead of rotating.