How to Get CSS Variables Working in Chrome 34

Unable to get CSS variables working in Chrome 34

CSS Variables is now supported in all modern browsers

except IE11 which has no intent to implement

The syntax in question was correct, and content below is likely still valuable for historical purposes. Please see this fiddle for a working example

I did some digging and got to the bottom of this. Chrome has temporarily removed the CSS Variables implementation. (See comment 5 on the Chrome ticket I reported for verification.) However, though I was provided with an answer, there remained the question of why - so I did more digging.

I had heard that WebKit (Safari) ditched its CSS Variables implementation and this was confirmed with the following two posts email/page and webkit.bugs.org feature removed CSS Variables - this was due to bad initial implementation/code as well as the CSS Variables WebKit developers focusing more on Google's Blink performance.

Chrome 33 dropped the vendor prefix for CSS Variables. It appears that Blink inherited the poor CSS Variables implementation and a recent patch removed the WebKit inherited code. The following are the lead dev's remarks from a Chrome ticket on the matter (February 2014)

Remove CSS Variables

This patch removes the current CSS Variables implementation inherited
from WebKit.

Our CSS Variables implementation in its current state needs a rewrite
before it is ready to ship. Our Bison CSS Parser is slated to be
rewritten from scratch, this would result in another rewrite of the
variables implementation. CSS Variables should be removed for the time
being to prevent bitrot.

In that same Chrome ticket it was expressed that the developers want to enhance Blink's performance before rewriting the CSS Variables:

If we were to ship CSS Variables with our current parser we would see little performance benefit over using a JavaScript framework to accomplish the same thing.
Our priority for Blink this year is performance on mobile, CSS Variables will be revisited after we tackle our performance deficiencies.

There is a bug tracking the new implementation.

In the meantime, if you wish to play around with CSS variables, Firefox has a working implementation - it's shipped by default with Firefox 31, for Firefox 29 you must activate layout.css.variables.enabled in about:config (enter in address bar).

Using CSS Variables in Chrome 29+

So, after reading code.google.com in attempt to find a solution, I've discovered that they had been planning on removing this feature from the "experimental WebKit features" and supporting the CSS3 standard, removing the necessity of the -webkit- vendor prefix.

I assumed that this meant it was implemented in Chrome 29. So, changing the above code to the following resolved the issue:

:root {
  var-Darkest: #3d0305;
  var-Lightest: #EDD08C;
  var-Light: #a98b46;
  var-Cool: #38fcce;
  var-Dark: #79161d;

  color: var(Darkest);
  border-color: var(Darkest);
  background-color: var(Light);
}

UPDATE Chrome 30 In what appears to be a transition from ending the use of WebKit to Chromium's Blink, there is a different flag that needs to be enabled called Enable experimental Web platform features. An Article at chromium.org had the solution.

UPDATE Chrome 34
The CSS Variables spec. has changed yet again. There were also other issues specific to the old code. I didn't update on this answer, because it was a rather different question. Please see this post for more on the issue.

How do you inspect CSS variables in the browser?

Using Chrome Canary, you can access this by viewing the element's Computed styles and enabling the Show all filter:

...

How can I detect CSS Variable support with JavaScript?

We can do this with CSS.supports. This is the JavaScript implementation of CSS's @supports rule which is currently available in Firefox, Chrome, Opera and Android Browser (see Can I Use...).

The CSS.supports() static methods returns a Boolean value indicating if the browser supports a given CSS feature, or not.
– Mozilla Developer Network

With this, we can simply:

CSS.supports('color', 'var(--fake-var)');

The result of this will be true if the browser supports CSS variables, and false if it doesn't.

(You might think that CSS.supports('--fake-var', 0) would work, but as noted in comments on this answer Safari seems to have a bug there making it fail.)

Pure JavaScript Example

On Firefox this code snippet will produce a green background, as our CSS.supports call above returns true. In browsers which do not support CSS variables the background will be red.

var body = document.getElementsByTagName('body')[0];
if (window.CSS && CSS.supports('color', 'var(--fake-var)')) {  body.style.background = 'green';} else {  body.style.background = 'red';}

:root {  --primary-color: hsl(0, 0%, 20%)}
body {  background: var(--primary-color)}

html {
  background:linear-gradient(red,blue); /* this will be used */
  background:strange-gradient(red,blue); /* this is a joke */
  
  min-height:100%;
}