无法在Chrome 34中使用CSS变数 [英] Unable to get CSS variables working in Chrome 34

问题描述

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

我看到语法已经改变（对于旧的，看到上面链接的问题），新的是当前在 CSS变量规范：

 ：root {
 --main-color：＃06c; 
 --accent-color：＃006; 
} 
 
 / * CSS文件的其余部分* / 
 h1＃foo {
 color：var（ -  main-color）; 
} 
  

这也很重要，我有启用实验Web平台功能标记。但是，如果您查看这个小提示，我既不能获得较旧的语法也不能在Chrome中使用新语法34.

Googling并没有打开任何已知的Chrome错误。我很好奇，如果有什么新的我要做，以使它工作？我做错什么了吗？有没有人遇到这个？

解决方案

我做了一些挖掘， Chrome已暂时移除CSS变数实作。 （请参阅我报告的Chrome浏览器的评论5）验证。）然而，虽然我被提供了一个答案，仍然有一个问题为什么 - 所以我做了更多的挖掘。

我听说WebKit其CSS变量实现，并通过以下两个职位电子邮件/第页和 webkit.bugs.org功能已删除CSS变量 - 此是因为错误的初始实现/代码以及CSS变量WebKit开发人员更多关注Google的Blink性能。

Chrome 33删除了CSS变量的供应商前缀。 看起来Blink继承了糟糕的CSS变量实施，最近的一个补丁删除了WebKit继承的代码。以下是一个 Chrome ticket on the matter （2014年2月）

删除CSS变量

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

我们的CSS变量在其当前状态下的实现需要重写
，然后才能发布。我们的Bison CSS解析器是从头开始重写的
，这将导致
变量实现的另一个重写。

在同一个Chrome故障单中，开发人员希望在重写CSS变量之前增强Blink的性能：

如果我们用当前的解析器发布CSS变量，有利于使用JavaScript框架来完成同样的事情。
我们今年Blink的首要任务是在移动设备上的性能，在我们解决我们的性能缺陷后，将重新审视CSS变量。

有跟踪新实施的错误。

同时，如果你想使用CSS变量，Firefox有一个工作的实现 - 它默认与Firefox 31，为Firefox 29发货，您必须激活 > （在地址栏中输入）

I previously asked a very similar question for an older version of Chrome. However, I am again having a hard time getting CSS variables to work, this time in Chrome 34 (Version 34.0.1847.131 m) on Windows 7. (Have not attempted on other OSes.)

I see that the syntax has been changed (for the old one, see the question linked above) and the new one is what is currently in the CSS Variables spec.:

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

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

It's also important to note, I do have the Enable experimental Web platform features flag enabled. However, if you look at this fiddle I can neither get the older syntax nor the new syntax working in Chrome 34.

Googling it didn't turn up any known Chrome bugs. I'm curious as to if there is something new I have to do to get it working? Did I do something wrong? Has anybody else encountered this?

解决方案

I did some digging and got to the bottom of this. Chrome has temporarily removed the CSS Variables implementation. (See comment 5 on the Chrome ticket I reported for verification.) However, though I was provided with an answer, there remained the question of why - so I did more digging.

I had heard that WebKit (Safari) ditched its CSS Variables implementation and this was confirmed with the following two posts email/page and webkit.bugs.org feature removed CSS Variables - this was due to bad initial implementation/code as well as the CSS Variables WebKit developers focusing more on Google's Blink performance.

Chrome 33 dropped the vendor prefix for CSS Variables. It appears that Blink inherited the poor CSS Variables implementation and a recent patch removed the WebKit inherited code. The following are the lead dev's remarks from a Chrome ticket on the matter (February 2014)

Remove CSS Variables

This patch removes the current CSS Variables implementation inherited from WebKit.

Our CSS Variables implementation in its current state needs a rewrite before it is ready to ship. Our Bison CSS Parser is slated to be rewritten from scratch, this would result in another rewrite of the variables implementation. CSS Variables should be removed for the time being to prevent bitrot.

In that same Chrome ticket it was expressed that the developers want to enhance Blink's performance before rewriting the CSS Variables:

If we were to ship CSS Variables with our current parser we would see little performance benefit over using a JavaScript framework to accomplish the same thing. Our priority for Blink this year is performance on mobile, CSS Variables will be revisited after we tackle our performance deficiencies.

There is a bug tracking the new implementation.

In the meantime, if you wish to play around with CSS variables, Firefox has a working implementation - it's shipped by default with Firefox 31, for Firefox 29 you must activate layout.css.variables.enabled in about:config (enter in address bar).

这篇关于无法在Chrome 34中使用CSS变数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！