@property

The @property is totally new to me, but I see it’s headed to Chrome, so I suppose it’s good to know about!
There is a draft spec and an “intent to ship” document. The code from that document shows:
@property –my-property {
syntax: ;
initial-value: green;
inherits: false;
}
That is the CSS exact-equivalent to a   CSS.registerProperty(), the JavaScript syntax for declaring CSS custom properties, also a new thing (under the Houdini umbrella, it seems).
It looks like you declare these not within a selector block, but outside (like a @media query), and once you have, you haven’t actually created a new custom property yet, you’ve just registered the fact that you probably will later. When you actually go to create/use the custom property, you create it within a selector block like you already do now.
The “commonly cited use-case” is pretty darn cool. Right now, this isn’t possible in CSS:
.el {
background: linear-gradient(white, black);
/* this transition wont work */
transition: 1s;
}
.el:hover {
background: linear-gradient(red, black);
}
You might think the white in that gradient will fade to red with that transition, but no, that’s not transition-able in that way. If we needed this in the past, we’d resort to trickery like fading in a pseudo-element with the new gradient colors or transitioning the background-position of a wider-than-the-element gradient to fake it.
Sounds like now we can…
@property –gradient-start {
syntax: ;
initial-value: white;
inherits: false;
}
.el {
–gradient-start: white;
background: linear-gradient(var(–gradient-start), black);
transition: –gradient-start 1s;
}
.el:hover {
–gradient-start: red;
}
Presumably, that works now because we’ve told CSS that this custom property is a so it can be treated/animated like a color in away that wasn’t possible before.
Reminds me of how when we use the attr() function to pull like data-size=22px off an element, we can’t actually use the 22px, it’s just a string. But that maybe-someday we’ll get attr(data-size px);
I have no idea when @property will actually be available, but looks like Chrome will ship first and there are positive signals from Safari and Firefox. ?