Chrome 30 CSS HACK

Question

为什么css规则不适用于Chrome？

的CSS：

.selector { (;property: value;); } 

或

.selector { [;property: value;]; }

Answer 1

首先，不 hack 。同样，这不仅适用于Chrome v30。所有其他现代浏览器都适用相同的功能。

CSS2.1规范中定义的here：

  

...括号（( )），括号（[ ]）和大括号（{ }）必须始终出现在匹配对中，并且可以嵌套

例如，当您添加(时，Chrome会在尝试应用任何样式之前等待结束)。但是，没有CSS属性像这样包含在括号中，因此不应用任何样式。

举个例子：

.selector {
    (color:#f00;); /* Invalid, ignored. */
    font-weight:Bold; /* Valid, not ignored. */
}

这里color声明在括号中，font-weight声明不在括号中。 Chrome会完全忽略color属性，因为这不是有效的CSS声明，但仍然正常处理font-weight：

JSFiddle demo

这样的括号，括号和大括号只是无效的CSS声明，并且最终会被忽略，其方式与下面的方法相同：

.selector {
    color; /* Invalid, ignored. */
    font-weight:Bold; /* Valid, not ignored. */
}

值得注意的是，Chrome会将括号和括号之间的任何内容视为单个CSS声明。在您的情况下，(;property: value;);被视为一个声明，无论多余的分号。

值得注意的是，如果在结束选择器（使用}）之前未能匹配结束对，则不会处理后面给出的任何选择器（example）。

Answer 2

这一组特殊的CSS奇怪实际上是已知的，而Safari的括号黑客（是的，他们有一个名字）。他们还在Chrome中工作到第28版。它目前在Safari 7.0及更早版本中运行（版本8是Safari的当前版本，因为我正在编写此更新）。