Unable to get CSS variables working in Chrome 34

Question

I previously asked a very similar question for an older version of Chrome. However, I am again having a hard time getting CSS variables to work, this time in Chrome 34 (Version 34.0.1847.131 m) on Windows 7. (Have not attempted on other OSes.)

I see that the syntax has been changed (for the old one, see the question linked above) and the new one is what is currently in the CSS Variables spec.:

:root {
  --main-color: #06c;
  --accent-color: #006;
}

/* The rest of the CSS file */
h1#foo {
  color: var(--main-color);
}

It's also important to note, I do have the Enable experimental Web platform features flag enabled. However, if you look at this fiddle I can neither get the older syntax nor the new syntax working in Chrome 34.

Googling it didn't turn up any known Chrome bugs. I'm curious as to if there is something new I have to do to get it working? Did I do something wrong? Has anybody else encountered this?

Answer 1

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

---

Original answer:

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).

Answer 2

Starting from Chrome 49 CSS Variables are enabled by default and you can use them as it is in the question.

https://www.chromestatus.com/features/6401356696911872