"@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,但我之前没有and在CSS文件中使用过.

为什么and必要后的空间角色？

Answer 1

像你说的那样,媒体查询本身用于过滤WebKit,因为它使用了一个-webkit-属性.

当你说它无法识别时,Chrome只是有点严格

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

因为那实际上是无效的CSS.and关键字后面的空格很重要.这在CSS3媒体查询规范中有明确规定:

实施例20

以下是格式错误的媒体查询,因为"和"之间没有空格,并且不允许表达式.(这是为功能表示法语法保留的.)
@media all and(color) { … }
Run Code Online (Sandbox Code Playgroud)

该功能是指符号之类的东西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)版本中修复