Question

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

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

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

  }

}

目前针对safari和chrome。

Answer 1

单独使用css没有特别的黑客攻击，而你可以覆盖野生动物园的css

FOR WEBKIT

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

Safari仅覆盖

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

Answer 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

Answer 3

试试这个：

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

如果您的浏览器支持webkit（Chrome），则大括号内的CSS才会运行。

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

针对铬而不是safari scss

3 个答案: