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

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?