在Chrome 29+中使用CSS变量

Question

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

更新Chrome 30从Chrome 29过渡到Chrome 30也杀死了CSS变量.在启用实验性WebKit功能标志不再是一个选项.

我一直在使用实验性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变量来启用标志(见下图)

Answer 1

因此,在阅读code.google.com以寻求解决方案之后,我发现他们一直在计划从"实验性WebKit功能"中删除此功能并支持CSS3标准,从而消除了-webkit-供应商前缀的必要性.

我认为这意味着它已在Chrome 29中实现.因此,将上述代码更改为以下代码可解决此问题:

: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);
}

更新Chrome 30在结束使用WebKit到Chromium的Blink的过程中,需要启用一个名为Enable experimental Web platform features的不同标志.chromium.org上的文章有解决方案.

更新Chrome 34 的CSS变量规范.又变了.旧代码还有其他特定问题.我没有更新这个答案,因为这是一个相当不同的问题.有关此问题的更多信息,请参阅此帖子.