CSS Hack for Safari Only

Override a specific css class only for Safari browser

-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
  }
}

What Safari-specific pure CSS hacks are out there?

I think the question is valid. I agree with the other responses, but it doesn't mean it's a terrible question. I've only ever had to use a Safari CSS hack once as a temporary solution and later got rid of it. I agree that you shouldn't have to target just Safari, but no harm in knowing how to do it.

FYI, this hack only targets Safari 3, and also targets Opera 9.

@media screen and (-webkit-min-device-pixel-ratio:0) {
   /* Safari 3.0 and Opera 9 rules here */
}

CSS hack for only Safari NOT Chrome?

CSS hacks are property specific to that browser, rather than browser specific to all properties.

Meaning, you may find a hack that can adjust the font in safari and not effect font in other browsers. However, you cannot use CSS hacks to change all properties in a specific browser.

Hope that helps!

---

Related Topics