10

我之前针对旧版 Chrome提出了一个非常相似的问题。但是，我再次很难让 CSS 变量正常工作，这次是在 Windows 7 上的 Chrome 34（版本 34.0.1847.131 m）中。（没有在其他操作系统上尝试过。）

我看到语法已更改（对于旧的，请参阅上面链接的问题），新的语法是CSS 变量规范中的当前内容。：

:root {
  --main-color: #06c;
  --accent-color: #006;
}

/* The rest of the CSS file */
h1#foo {
  color: var(--main-color);
}

还需要注意的是，我确实启用了启用实验性 Web 平台功能标志。但是，如果您看一下这个小提琴，我既无法获得旧语法，也无法在 Chrome 34 中使用新语法。

谷歌搜索没有发现任何已知的 Chrome 错误。我很好奇是否有什么新的东西我必须做才能让它工作？我做错什么了吗？有没有其他人遇到过这个？

4

2 回答 2

20

现在所有现代浏览器都支持CSS 变量

除了 IE11 没有实施的意图

有问题的语法是正确的，下面的内容对于历史目的可能仍然有价值。请参阅此小提琴以获取工作示例

原答案：

我做了一些挖掘并找到了这个问题的根源。Chrome 已暂时删除 CSS 变量实现。（请参阅我为验证报告的 Chrome 票证的评论 5。）然而，虽然我得到了答案，但仍然存在为什么的问题 - 所以我做了更多的挖掘。

我听说 WebKit (Safari) 放弃了它的 CSS 变量实现，这在以下两篇帖子中得到证实，电子邮件/页面和webkit.bugs.org 功能删除了 CSS 变量- 这是由于初始实现/代码以及 CSS 错误变量 WebKit 开发人员更关注 Google 的 Blink 性能。

Chrome 33 删除了 CSS 变量的供应商前缀。Blink 似乎继承了糟糕的 CSS 变量实现，并且最近的一个补丁删除了 WebKit 继承的代码。以下是来自Chrome 票证的首席开发人员对此事的评论（2014 年 2 月）

删除 CSS 变量

此补丁删除了从 WebKit 继承的当前 CSS 变量实现。

我们当前状态下的 CSS 变量实现需要在准备好发布之前重写。我们的 Bison CSS Parser 计划从头开始重写，这将导致变量实现的另一次重写。CSS 变量应该暂时被移除，以防止 bitrot。

在同一张 Chrome 票证中，开发人员希望在重写 CSS 变量之前增强 Blink 的性能：

如果我们用我们当前的解析器来传送 CSS 变量，我们会发现与使用 JavaScript 框架来完成同样的事情相比，性能几乎没有什么好处。我们今年 Blink 的首要任务是在移动设备上的性能，在我们解决性能缺陷后将重新审视 CSS 变量。

有一个跟踪新实现的错误。

同时，如果您想使用 CSS 变量，Firefox 有一个有效的实现 - 它默认与 Firefox 31 一起提供，对于 Firefox 29，您必须激活（layout.css.variables.enabled在about:config地址栏中输入）。

于 2014-05-07T13:12:20.190 回答
1

从 Chrome 49 开始，默认情况下启用 CSS 变量，您可以在问题中使用它们。

https://www.chromestatus.com/features/6401356696911872

于 2016-02-05T07:11:07.907 回答