CSS @media 检查非 Webkit

Question

我想创建一个CSS文件，如果浏览器使用Webkit，则应用一种样式，否则应用另一种。我阅读了如何检查它是否使用Webkit：

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

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

- NickEntin

---

你尝试过使用 @media not (-webkit-min-device-pixel-ratio:0) 吗？ - Linus Caldwell

是的。然后在Chrome和Firefox中尝试了一下。里面的样式都没有应用。 - NickEntin

这不是你检查webkit的方式，而是你检查min-device-pixel-ratio的方式，这恰好是一个带有-webkit前缀的供应商查询。你可以通过理解它正在测试什么来反转它，但请记住，在CSS /媒体中，布尔检查浏览器不是一个适用的上下文。如果您想提供一个Webkit超级样式表，您可能最好使用基于嗅探测试或服务器端嗅探和包含的Javascript加载，这更符合您的需求。 - Jared Farrish

这是一篇相当幽默且口无遮拦的抨击文章，来自（总是令人惊叹的）Peter-Paul Koch，关于媒体查询解析规则和语法的可怕状态。事实上，情况确实如此糟糕。 - Jared Farrish

如果您正在尝试检测特定功能的支持（例如一些仅限于webkit的功能），则可以使用Modernizer。这些东西会不断发展，因此做出假设并试图锁定或隔离供应商是徒劳的。渐进增强是最好的选择，但耗时且有时比它值得的麻烦更多。因此，您可以构建您的级联样式表以继承您希望所有浏览器具有的样式，然后过度选择那些能够利用您的附加工具的样式。这就是CSS的工作方式，逐步构建。 - Jared Farrish

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 则只是勉强看了一下。

好时光。你可以尝试调整顺序，通过将 all 移至 not 之后使其覆盖 not；只需记住这是因为它继承了那个属性，你知道，Chrome 想干嘛就干嘛。

试试 Modernizr，搭配 yepnope.js 和 selectivzr.js 使用。它们都做得相当不错。

- Jared Farrish

---

从外观上看，这似乎是一种依赖于1）WebKit解释媒体特性而不需要()作为媒体特性和2）其他浏览器将没有()的媒体特性解释为媒体类型（例如所有，打印，屏幕，投影）的黑客。现在这一切都说得通了。您可以在规范中找到语法：http://www.w3.org/TR/css3-mediaqueries - BoltClock

这个答案可能也会引起兴趣：https://dev59.com/A2Yr5IYBdhLWcg3wfaSc#13649011。为了澄清你之前的评论（我不知道怎么错过了），未知的媒体类型是浏览器无法识别的类型，而无效/格式错误的媒体查询是语法上错误的。但在这两种情况下，浏览器都应该忽略单个媒体查询并继续解析其余的@media规则。 - BoltClock

它没有起作用... 我可以在Chrome和Firefox上看到“石灰”色 - Saurabh Bayani

对我没有起作用，但这个可以：@media screen and (-webkit-min-device-pixel-ratio:0) {} - Alexandre Bourlier

@AlexandreBourlier - 谢谢。 - Jared Farrish

Answer 2

你可以尝试使用min：

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

and max:

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

- noreabu

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。

- aGuegu