Override a specific css class only for Safari browser

Question

Is there a way to override a css for only Safari browser?

I am using Safari version 15.1 but looking to be able to target any version.

Tried the following via codepen. But it does not override in 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>

Seen examples such as following explaining safari overrides.

But these are not overriding a 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

Why is `.myClass` wrapped in `.safari_only` ? Is this SCSS or a typo? — dziku86, Feb 23 '22 at 20:34

score 0 · Accepted Answer · answered Feb 23 '22 at 20:17

-webkit-appearance is (luckily or not) also supported by Firefox and Edge as mentioned in the mozilla documentation. Only thing I can imagine to work is to use JavaScript to target the user agent:

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

Override a specific css class only for Safari browser

1 Answers1