Question

根据http://www.webmonkey.com/2010/02/browser-specific_css_hacks/，我碰巧在基于WebKit的浏览器中使用了以下CSS hack。

@media screen and (-webkit-min-device-pixel-ratio:0) {
    #my-id { height: 100%; }
}

有效。但是，后来我发现它在生产环境中不起作用。我发现这是由于CSS优化器在and之后修剪空间。 Chrome无法识别以下CSS。

@media screen and(-webkit-min-device-pixel-ratio:0) {
    #my-id { height: 100%; }
}

那么，@media screen and (-webkit-min-device-pixel-ratio:0)究竟是什么意思？

我知道@media screen，但之前我没有在CSS文件中使用and。

为什么and之后的空格字符是必要的？

Answer 1

媒体查询本身就像你说的那样，用于过滤WebKit，因为它使用-webkit-属性。

当您说无法识别时，Chrome只是有点严格

@media screen and(-webkit-min-device-pixel-ratio:0)

因为这实际上是无效的CSS。 and关键字后面的空格非常重要。这在CSS3 media query spec：

中明确说明

实施例20

以下是格式错误的媒体查询，因为“和”之间没有空格，并且不允许使用表达式。（这是为功能表示法语法保留的。）
@media all and(color) { … }

功能表示法指的是url()，rgb()和rgba()之类的内容。如您所见，这些示例中的函数名称和左括号之间没有空格。

and不是一个函数，只是一个关键字，表示媒体查询必须与您指定的媒体匹配，和布局引擎必须满足您在其后面的表达式。 -webkit-min-device-pixel-ratio:0周围的括号只是将其表示为表达式。

附录：是的，这确实意味着你的CSS优化器有一个bug;）

Answer 2

以下是YUI压缩器特别评论的快速解决方法。

@media screen and/*!*/(-webkit-min-device-pixel-ratio:0) { ... }

此问题已在当前（2.4.5）版本中修复

Answer 3

仅使用此：

@media(-webkit-min-device-pixel-ratio:0) {

}