在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眨眼之间的过渡中，有一个不同的标志需要启用名为启用实验性网络平台功能。 Article at chromium.org有解决方案。

更新Chrome 34 CSS Variables spec.再次发生了变化。旧代码还有其他特定问题。我没有更新这个答案，因为这是一个相当不同的问题。有关此问题的详情，请参阅this post。