Need to more fully support Custom Properties (and eventually remove them from the variable spec entirely, since they’ll be defined here).
By default, custom properties are optimized for use as var() values—they inherit, have an empty initial value, don’t do any syntax checking, and don’t animate. All of these should be adjustable somehow.
@custom-property --foo {
scope: [ inherit | local ];
initial: <any-value>*;
value: <length> <length> <color>;
/* Literally, define a simplistic definition syntax.
OR FULL CSS PROPERTY GRAMMAR?!? */
}
If you provide a "value" field with animatable types, we can animate in the most direct fashion automatically. We could also let you hook into that: you register a callback, and whenever a property starts animating, we call it with the starting and ending values. You have to return a function which takes a progress value (between 0 and 1) and returns a value for your property; we’ll call it as we animate the value. (How can we hook into Web Anim here? Can you just return an Animation object?)
Do we need a hook for computed values? Interesting. We could just hand your callback a set of property values for the element and its parent (maybe siblings, if you ask for it?), and you can return a new value for the property. This is probably an advanced feature for a later date.
Definitely need a way to listen for elements receiving and changing property values, so you can efficiently polyfill things and make your own properties. Unsure how it would look at the moment.
We should follow this http://dev.w3.org/csswg/css-extensions/#custom-property