在Chrome 29+中使用CSS变量 [英] Using CSS Variables in Chrome 29+

问题描述

我的Chrome浏览器刚刚从版本28切换到版本29.一旦切换，我的css3代码停止在新版本中工作，我想知道是否有人知道如何解决这个问题，而不必将我的浏览器设置回版本28？

UPDATE Chrome 30 从Chrome 29过渡到Chrome 30时，也会停用CSS变量。

我一直在使用实验性的WebKit功能，特别是CSS变量。以下功能是我特别想要的工作：

 ：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）; 
} 
  

以前，我必须使用CSS变量来启用标志请参阅以下图片）

解决方案

因此，在阅读再次更改。还有其他特定于旧代码的问题。我没有更新这个答案，因为这是一个相当不同的问题。有关问题的详情，请参阅此信息。

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)

解决方案

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.

这篇关于在Chrome 29+中使用CSS变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！