Using CSS Variables in Chrome 29+

问题

My Chrome browser just switched from version 28 to version 29. Once it switched over, my css3 code stopped working in the new version and I was wondering if anyone knew how to resolve the issue, without having to set my browser back to version 28?

UPDATE Chrome 30 transitioning from Chrome 29 to Chrome 30 killed CSS Variables as well. The Enable experimental WebKit features flag is no longer an option.

I have been using experimental WebKit features, specifically CSS Variables. The following functionality is what I specifically want working again:

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

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

Previously all I had to do to use CSS Variables was to enable the flag (see following image)

回答1:

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.

来源：https://stackoverflow.com/questions/18466569/using-css-variables-in-chrome-29

标签

css

css3

google-chrome

flags

css-variables