Target Safari CSS, But Not Chrome

Target safari css, but not chrome

Found somewhere else here. worked fine for me

@media screen and (-webkit-min-device-pixel-ratio:0) { 
/* Safari and Chrome */
.myClass {
 color:red;
}

/* Safari only override */
::i-block-chrome,.myClass {
 color:blue;
}
}

Are there specific ways to target a safari browser in css

There’s no way to do this directly in CSS. You can detect Safari using JavaScript, e.g. with the following code:

if (!!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)) {
    document.getElementsByTagName('html')[0].className += 'is-safari';
}

Then you can do something like this in your CSS:

html.is-safari .selected1 :hover {border-width: 3px;}

However, my recommendation is to avoid this. Detecting the user agent string is generally not a good idea.

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

Is it possible to target Chrome only, not all Webkit powered browsers?

There are browser-specific CSS hacks that might work for this problem now, but they certainly aren't supported.

IMHO, your best bet is to add a class to the body tag using JavaScript that reads your navigator.userAgent and use that class (body.chrome for example) to target Chrome.

---

Related Topics