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尽职尽责只是看起来有些过分。

美好时光。你可以调整一下订单，然后通过移动它来全部覆盖它;请记住，它继承了这一点，因为，知道，Chrome会做它想要的。

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

Answer 2

您可以尝试使用min：

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

和max：

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

Answer 3

我在处理-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。

CSS @media检查是否不是Webkit

3 个答案: