我想创建一个CSS文件,如果浏览器使用Webkit,则应用一种样式,否则应用另一种。我阅读了如何检查它是否使用Webkit:
@media (-webkit-min-device-pixel-ratio:0)
然而,我不知道如何检查它是否未使用Webkit。我尝试在媒体查询前面添加not
,但似乎不起作用。有没有解决方法或更好的方法?谢谢。
我想创建一个CSS文件,如果浏览器使用Webkit,则应用一种样式,否则应用另一种。我阅读了如何检查它是否使用Webkit:
@media (-webkit-min-device-pixel-ratio:0)
然而,我不知道如何检查它是否未使用Webkit。我尝试在媒体查询前面添加not
,但似乎不起作用。有没有解决方法或更好的方法?谢谢。
我仍然坚持我的评论,但这是我能想到的最好的。再次强调,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 则只是勉强看了一下。
好时光。你可以尝试调整顺序,通过将 all 移至 not 之后使其覆盖 not;只需记住这是因为它继承了那个属性,你知道,Chrome 想干嘛就干嘛。
试试 Modernizr,搭配 yepnope.js 和 selectivzr.js 使用。它们都做得相当不错。
()
作为媒体特性和2)其他浏览器将没有()
的媒体特性解释为媒体类型(例如所有,打印,屏幕,投影)的黑客。现在这一切都说得通了。您可以在规范中找到语法:http://www.w3.org/TR/css3-mediaqueries - BoltClock@media screen and (-webkit-min-device-pixel-ratio:0) {}
- Alexandre Bourlier@media screen (-webkit-min-device-pixel-ratio: 0)
and max:
@media screen (-webkit-max-device-pixel-ratio: 0)
在处理 -webkit-line-clamp
时,我遇到了这个问题,它似乎目前只是 Webkit 的一个特性。
因此,我创建的 SCSS mixin 是:
@mixin line-clamp($line) {
height: calc(1.3em * #{$line});
&:after {
content: '...';
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: $line;
}
@media screen and (min--moz-device-pixel-ratio:0) {
display: block;
text-overflow: ellipsis;
overflow: hidden;
position: relative;
padding-right: 10px;
&:after {
position: absolute;
bottom: 0;
right: 0;
}
}
}
它使用不同的媒体查询来分离 Webkit 和 Firefox 的 SCSS。
@media not (-webkit-min-device-pixel-ratio:0)
吗? - Linus Caldwell-webkit
前缀的供应商查询。你可以通过理解它正在测试什么来反转它,但请记住,在CSS /媒体中,布尔检查浏览器不是一个适用的上下文。如果您想提供一个Webkit超级样式表,您可能最好使用基于嗅探测试或服务器端嗅探和包含的Javascript加载,这更符合您的需求。 - Jared Farrish