17

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?

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
Morgan Cheng
  • 73,950
  • 66
  • 171
  • 230
  • 1
    Technically, I don’t think that’s a CSS hack. It’s not exactly what those language features were intended for, but it pretty effectively identifies WebKit, thanks to its use of `-webkit-min-device-pixel-ratio:0`. One of the not-so-hacky hacks. – Paul D. Waite Nov 06 '10 at 22:55
  • See also http://stackoverflow.com/questions/4144706/is-there-a-version-of-yui-compressor-that-deals-correctly-with-media-queries – Paul D. Waite Nov 01 '11 at 14:10

3 Answers3

24

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 ;)

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
13

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

szaboat
  • 593
  • 3
  • 11
  • 1
    +1 for this quick fix. I am using the 'yuicompressor-maven-plugin', which is still using 2.4.2. – Jan Apr 18 '11 at 09:46
  • fix works great with ajaxminifier ... Thanks a lot. syntax: @media screen/*!*/and/*!*/(-webkit-min-device-pixel-ratio:0) – MK. Apr 15 '12 at 10:43
0

Only use this:

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

}
0b10011
  • 18,397
  • 4
  • 65
  • 86
Fareed Alnamrouti
  • 30,771
  • 4
  • 85
  • 76