在 Chrome 29+ 中使用 CSS 变量答案

【问题标题】：Using CSS Variables in Chrome 29+在 Chrome 29+ 中使用 CSS 变量
【发布时间】：2013-08-30 06:25:10
【问题描述】：

我的 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 变量所要做的就是启用标志（见下图）

【问题讨论】：

标签： css google-chrome flags css-variables

【解决方案1】：

所以，在阅读code.google.com 试图找到解决方案之后，我发现他们一直计划从“实验性 WebKit 功能”中删除此功能并支持 CSS3 标准，从而消除了@987654326 的必要性@供应商前缀。

我认为这意味着它是在 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 34 CSS Variables spec. 又变了。还有其他特定于旧代码的问题。我没有更新这个答案，因为这是一个相当不同的问题。有关此问题的更多信息，请参阅this post。

【讨论】：