Does anyone know of the progress of the mentioned API for CSS variables?
This is mentioned here: http://www.w3.org/TR/css-variables-1/#changes
@tabatkins is something that is on your roadmap at the moment or is it a much longer time frame?
Definitely on my roadmap - it’ll show up in CSS Extensions http://dev.w3.org/csswg/css-extensions/ when I have time.
In the mean time, you can use the usual CSSOM APIs to access custom properties like any other property.
@SimonSapin getPropertyValue for custom properties appears to be disabled in Firefox Aurora which is the only browser that does support the latest variable notation.
Interestingly Chrome doesn’t seem to even recognise properties with doubled dashes at all with code like:
var root = document.querySelector(':root');
console.log(root.style.getPropertyValue('varnamething')); //null
console.log(root.style.getPropertyValue('--varnamething')); //null
console.log(window.getComputedStyle(root).getPropertyValue('--varnamething')); //null
console.log(window.getComputedStyle(root).getPropertyValue('varnamething')); //null
Both browsers behaviour appear to be correct as the spec suggests: http://www.w3.org/TR/css-variables-1/#apis
Note: Custom properties do not appear on a CSSStyleDeclaration object in camel-cased form, because their names may have both upper and lower case letters which indicate distinct custom properties. The sort of text transformation that automatic camel-casing performs is incompatible with this. They can still be accessed by their proper name via getProperty()/etc.
@tabatkins the quote above should also say getPropertyValue right?
I saw your talk on flex and grid, I can see why you were most excited by CSS extensions now 
.
Thanks both for your help, please let me know if I am missing something.
I believe this refers to, e.g., the background-image property being available as root.style.backgroundImage, but not to getPropertyValue and other methods.
As far as I remember, the WG discussion was that deferring this new API was fine because getPropertyValue could be used in the mean time.
Ah, yes, it should say getPropertyValue(). I’ll fix.
Chrome not recognizing properties with double dashes is because Chrome doesn’t support custom properties at all right now. 
Firefox not recognizing them in getPropertyValue() is wrong; could you file a bug?
@tabatkins does Chrome not recognise them as invalid properties then? I was expecting them to be exposed due to the CSSOM fallback defined in: DOM level 2
While an implementation may not recognize all CSS properties within a CSS declaration block, it is expected to provide access to all specified properties in the style sheet through the CSSStyleDeclaration interface.
It is kind of murky waters if it is a property I guess as you mentioned before, you would have preferred not to call them variables. I guess Chrome is not parsing them as they don’t fit the <ident-token> definition should this grammar also be modified for the new custom variable format? I know 8.1 mentions future formats could extend this however it also mentions custom variables too as if it were to comply - I know I’m bikeshedding a little here now.
After checking again getComputedStyle works in a much simpler example.
Am I right in thinking the following still should return red or should custom properties only populate the computed set?
console.log(root.style.getPropertyValue('--varnamething')); // expected: red output: null
Don’t pay any attention to DOM Level 2 Style - it’s a long-obsolete spec that never actually got implemented except in a piecemeal fashion. Anything worthwhile from it has been ported into the CSSOM spec.
Also, don’t pay any attention to specs on /TR, because they are, almost by definition, obsolete. The editor’s draft of Syntax has a modified definition of <ident-token> that allows a double-dash at the beginning.
I’ll check your codepen when I get into the office.
Okay, checked it out. I get an empty string for all four expressions in Firefox Aurora on all of those, but it’s possible my Aurora is out of date.
Again thanks for the clarifications.
I tried on new installs on Mac and Linux and both seem to work as I commented.
Am I right in suggesting both the commented ones should work:
var root = document.querySelector(':root');
console.log(root.style.getPropertyValue('--varnamething')); // expected: red output: null
console.log(window.getComputedStyle(root).getPropertyValue('--varnamething')); // expected: red output: red
Yes, both of those should work.