finding if the current working browser is safari via css or javascript

Question

I researched on identifying, if the browser is Safari or not. In javascript : window.devicePixelRatio object gives '1' for both chrome and safari In CSS :

@media screen and (-webkit-min-device-pixel-ratio:0){
    #yourdiv{
        margin-left:0;

    }
} 

It works for both chrome and safari. But I didn't find css or javascript hack for safari browser only (shouldn't work for any other browser). Can any body help me out.

I am using the safari brower: navigator.useragent = Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16

Answer 1

if (navigator.userAgent.match(/AppleWebKit/) && ! navigator.userAgent.match(/Chrome/)) {
   alert('this is safari brower and only safari brower')
}

Answer 2

CSS hacks are frowned upon, though less frowned upon when targeting older versions of IE (a necessary evil).

You could figure out if using Safari like this...

JavaScript

if (navigator.userAgent.match(/OS X.*Safari/) && ! navigator.userAgent.match(/Chrome/)) {
   document.body.className += 'safari';
}

...and then use modify your selectors for Safari like so...

CSS

.safari #yourdiv {
    margin-left: 0;
}

jsFiddle.