仅针对 Safari 浏览器覆盖特定的 css class

Question

有没有办法只为 Safari 浏览器覆盖 css？

我正在使用 Safari 版本 15.1，但希望能够针对任何版本。

通过 codepen 尝试了以下操作。但它不会在 Safari 中覆盖。

.myClass {
  background-color: grey;
  color: red;
  width: 2000px;
  height: 50px;
}

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {
  .safari_only {
    .myClass {
      background-color: yellow;
      color: green;
      width: 2000px;
      height: 50px;
    }
  }
}}

<html>
  <body>
    <div class="myClass">
      Sample 1
    </div>
  </body>
</html>

查看示例，例如以下解释 Safari 覆盖的示例。

但是这些并没有覆盖 css class。

is there a css hack for safari only NOT chrome?

How do I add a css line ONLY for Safari

CSS hack for Safari ONLY

https://solvit.io/bcf61b6

Answer 1

-webkit-appearance（幸运与否）也受 Firefox 和 Edge 的支持，如 mozilla documentation 中所述。我唯一能想到的工作就是使用 JavaScript 来定位用户代理：

function detectBrowser() {
  if (navigator.userAgent.includes("Safari")) {
    // your code here
  }
}

仅针对 Safari 浏览器覆盖特定的 css class

Override a specific css class only for Safari browser

html

css

safari