CSS @media检查是否不是Webkit [英] CSS @media Check if not Webkit

问题描述

我正在尝试创建一个CSS文件，如果浏览器使用的是webkit，则应用一种样式，否则使用另一种样式.我阅读了如何通过以下方法检查它是否正在使用Webkit:

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)

但是，我不知道如何检查它是否未使用Webkit.我尝试在媒体查询前面添加not，但是它似乎不起作用.任何人都有解决方案或更好的方法吗?谢谢.

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.

推荐答案

我仍然支持我的评论，但这是我能提出的最好的评论.再一次，not是正确的.您尝试找出其中一个.

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.

所以:

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/

编辑

也有人建议这样做:

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

真正有趣的是Chrome可以带给您一个不容错过的机会.当然，两者匹配都没错，而Firefox尽职尽责地显得有些lime.

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.

美好的时光.您可能可以调整顺序，并在之后移动所有内容以覆盖所有内容.请记住，它是继承的，因为您知道Chrome可以实现它想要的功能.

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.

使用yepnope.js和selectivzr.js试用Modernizr.这些执行得很好.

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

这篇关于CSS @media检查是否不是Webkit的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！