“@media screen and (-webkit-min-device-pixel-ratio:0)”的语义是什么？

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

以下是格式错误的媒体查询，因为“and”和表达式之间没有空格是不允许的。 （这是为功能符号语法保留的。）

@media all and(color) { … }

函数符号指的是url()、rgb() 和rgba()。如您所见，在这些示例中，函数名称和左括号之间没有空格。

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

附录： 是的，这确实意味着您的 CSS 优化器有错误 ;)

Answer 2

这里是 YUI 压缩器的特殊注释的快速解决方法。

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

该问题已在当前 (2.4.5) 版本中修复

https://github.com/yui/yuicompressor/blob/master/src/com/yahoo/platform/yui/compressor/CssCompressor.java#L180

Answer 3

只用这个：

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

}