无法在Chrome 34中使用CSS变量

Question

我之前曾为旧版Chrome 问过一个非常类似的问题.但是,我再一次很难让CSS变量工作,这次是在Windows 7上的Chrome 34(版本34.0.1847.131 m)中.(没有尝试过其他操作系统.)

我看到语法已经改变了(对于旧语法,请参阅上面链接的问题),新的语法是CSS Variables规范中的当前语法.:

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

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

值得注意的是,我确实启用了启用实验性Web平台功能标志.但是,如果你看一下这个小提琴,我既不能在Chrome 34中使用旧语法,也不能使用新语法.

谷歌搜索没有发现任何已知的Chrome错误.我很好奇是否有新的东西需要做才能让它运转起来？我做错什么了吗？有没有人遇到过这个？

Answer 1

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

IE11除外,无意执行

有问题的语法是正确的,下面的内容可能仍然有用于历史目的.一个工作的例子,请看这个小提琴

原始答案:

我做了一些挖掘并深入研究了这一点.Chrome已暂时删除了CSS Variables实施.(请参阅我报告验证的Chrome票据上的评论5.)然而,虽然我得到了答案,但仍然存在问题 - 所以我做了更多的挖掘.

我听说WebKit(Safari)放弃了它的CSS Variables实现,这已通过以下两个帖子确认了电子邮件/页面和webkit.bugs.org功能已删除CSS变量 - 这是由于错误的初始实现/代码以及CSS变量WebKit开发人员更关注Google的Blink性能.

Chrome 33删除了CSS Variables的供应商前缀.看来Blink继承了糟糕的CSS Variables实现,最近的一个补丁删除了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(在地址栏输入).