如何在不影响Edge的情况下将样式应用于Chrome

Question

我正在尝试使用chrome样式来修复错误。我能够让它工作，但是当我在Edge中检查它时，我现在可以看到边缘了。如何在不影响任何其他浏览器的情况下将我的风格应用于Chrome（我使用的是版本60）？

{{1}}

Answer 1

要定位特定浏览器，您可以使用@supports并按特定浏览器组合支持和/或不支持的CSS属性。您也可以通过这种方式排除其他浏览器。

如果您只关心Windows上的Chrome，您应该知道即使使用hyphens: auto前缀也不支持-webkit（但Chrome for Mac和Android支持-webkit-hyphens: auto）所以使用媒体查询定位Chrome for Windows

@supports not ((-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto)) {
/* Your styles here */
}

实施例

@supports not ((-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto)) {
  * {
    color: red;
  }
}

This is red, but only in Chrome for Windows