What's the semantic of "@media screen and (-webkit-min-device-pixel-ratio:0)"?

Question

I happened to use the below CSS hack for WebKit-based browsers, according to http://www.webmonkey.com/2010/02/browser-specific_css_hacks/.

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

It works. But, later I found that it doesn't work in production environment. I found out that it is due to CSS optimizer trimming the space after and. The below CSS is not recognizable by Chrome.

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

So, what does exactly the @media screen and (-webkit-min-device-pixel-ratio:0) mean?

I know @media screen, but I haven't used and in a CSS file before.

Why is the space character after and necessary?

Answer 1

The media query itself is, like you say, used to filter WebKit because it uses a -webkit- property.

Chrome is simply a little strict when you say it can't recognize

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

because that is in fact invalid CSS. The space after the and keyword is significant. This is clearly stated in the 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) { … }

The functional notation refers to things like url(), rgb() and rgba(). As you can see there is no space between the function name and the opening parenthesis in these examples.

and is not a function, but simply a keyword to say that the media query must match the medium you specify, and that the layout engine must satisfy the expression you place after it. The parentheses around -webkit-min-device-pixel-ratio:0 simply denote it as an expression.

Addendum: yes, that does mean your CSS optimizer has a bug ;)

Answer 2

Here is a quick workaround with YUI compressor's special comment.

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

The issue is fixed in the current (2.4.5) version

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