google-chrome - "@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 优化器修剪了 和 之后的空间。 Chrome 无法识别以下 CSS。

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

那么，@media 屏幕和 (-webkit-min-device-pixel-ratio:0) 到底是什么意思？

我知道@media screen，但我以前没有在CSS文件中使用过和。

为什么和后面的空格是必须的？

Answer 1

正如您所说，媒体查询本身用于过滤 WebKit，因为它使用 -webkit- 属性。

你说不能识别，chrome只是严格了点

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

因为那实际上是无效的 CSS。 和 关键字后的空格很重要。 CSS3 media query spec 中明确说明了这一点:

EXAMPLE 20

The following is an malformed media query because having no space between ‘and’ and the expression is not allowed. (That is reserved for the functional notation syntax.)

@media all and(color) { … }

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

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

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