CSS @media 检查是否不是 Webkit

Question

我正在尝试创建一个 CSS 文件，如果浏览器正在使用 webkit，则应用一种样式，如果不使用，则应用另一种样式。我阅读了如何检查它是否正在使用 Webkit:

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

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

Answer 1

我仍然坚持我的意见，但这是我能想到的最好的。再次强调，not 不是没有错就是对。你试着想出那个。

所以:

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 尽职尽责地看起来有点石灰。

美好的时光。您可能可以调整顺序并通过在之后移动它来覆盖 not ；请记住，它继承了这一点，因为您知道，Chrome 会做它想做的事。

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