Are there specific ways to target a safari browser in css

Question

I am trying to give a safari browser:

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

and the other browsers:

.selected1 :hover {border-width: 2px;}

I read many ways how you can target a safari browser but also my chrome browser folows the lines. I didn`t find a way to only target a safari browser. Hopefully you guys have one for me!

Thnx

Why do you want to do this? It seems like there must be a better method. — andi, Feb 19 '15 at 20:30
possible duplicate of [is there a css hack for safari only NOT chrome?](http://stackoverflow.com/questions/16348489/is-there-a-css-hack-for-safari-only-not-chrome) — Dryden Long, Feb 19 '15 at 20:33

score 1 · Accepted Answer · answered Feb 19 '15 at 20:34

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.

Are there specific ways to target a safari browser in css

1 Answers1