针对 chrome 而不是 safari scss答案

【问题标题】：Targeting chrome not safari scss针对 chrome 而不是 safari scss
【发布时间】：2017-06-22 22:23:55
【问题描述】：

我正在寻找一种仅在 scss 中的 mixin 中定位 chrome 浏览器的方法。

@mixin {
 &:after {
 border-bottom:black; 

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

  }

}

目前这针对 safari 和 chrome。

【问题讨论】：

注意不要直接在@media块中添加声明，首先要使用CSS选择器。
为什么需要针对 Chrome 而不是 Safari？需要针对特定浏览器几乎可以肯定是设计/实现不佳的标志。

标签： html css google-chrome safari sass

【解决方案1】：

单独的 css 没有特别的技巧，而您可以覆盖 safari 的 css

用于 WEBKIT

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .class{color:red;}
}

Safari 仅覆盖

::i-block-chrome,.class {
 color:blue;
}}

【讨论】：

不确定如何与 mixin 一起使用，因为我还没有在特定类上使用它

【解决方案2】：

如果您正在寻找媒体查询，Chrome 版本现在可以分开。不久前，我从组合研究中创建了这个，直到我找到了一种可行的方法。我几个月前将它发布到 browserhacks.com（我为他们做测试）。 Chrome 29+ 可通过媒体查询定位。目前，它已在所有现代版本的 Chrome 甚至开发版和 Canary 版本（最高版本 40）中进行了测试。

试试这个，而不是嵌入在你的 mixin 中的 Chrome + Safari 媒体查询：

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
   border-bottom: red;
}

我已经发布了一些现场测试，以及我在这里工作或创建的其他测试：

http://browserstrangeness.bitbucket.org/css_hacks.html

【讨论】：

【解决方案3】：

试试这个：

@supports (-webkit-appearance:none) {}

大括号内的 CSS 仅在您的浏览器支持 webkit (Chrome) 时才会运行。

Browserhacks 是“浏览器特定 CSS 和 JavaScript hacks”的绝佳资源

【讨论】：