CSS @media Check if not Webkit

Question

I'm trying to create a single CSS file that applies one style if the browser is using webkit, and another if not. I read how to check if it is using Webkit with:

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

However, I can't figure out how to check if it's not using Webkit. I tried adding not in front of the media query, but it doesn't seem to work. Anyone have a solution or a better way to do it? Thanks.

Answer 1

I still stand by my comments, but this was the best I could come up with. Once again, not is is not not wrong right. You try to figure that one out.

So:

html, body {
    background: blue;
}
@media all -webkit-device-pixel-ratio {
    body {
        background: black;
        color: red;
        font: bold 28px monospace;
    }
}
@media not -webkit-device-pixel-ratio {
    body {
        background: lime;
    }
}

http://jsfiddle.net/userdude/pyvYA/4/

EDIT

This has also been suggested as working:

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

The really fancy thing is that Chrome takes you a not and raises you all. It, of course, sees nothing wrong with matching both, while Firefox dutifully only looks a bit lime.

Good times. You can probably tweak the order and have the all override the not by moving it after; just keep in mind it's inheriting that because, you know, Chrome does what it wants.

Try Modernizr out, with yepnope.js and selectivzr.js. Those are pretty well executed.

Answer 2

You could try with min:

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

and max:

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