css - 在 Chrome 29+ 中使用 CSS 变量

Question

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

更新 Chrome 30 从 Chrome 29 过渡到 Chrome 30 也杀死了 CSS 变量。 Enable experimental WebKit features 标志不再是一个选项。

我一直在使用实验性的 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 的过渡中，需要启用一个不同的标志 称为启用实验性 Web 平台功能。一个Article at chromium.org有了解决方案。

更新 Chrome 34CSS Variables spec.又变了。还有其他特定于旧代码的问题。我没有更新这个答案，因为这是一个完全不同的问题。请看this post有关此问题的更多信息。