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

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开发者_StackOverflow中文版/5.0 Safari/533.16

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

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.

There's a javascript function that helps identify most browsers here.

Its worth keeping up to date on, as it is updating regularly.

By way of explanation the following is copied from the linked page:

Browser detection

The dataBrowser array is filled with objects that contain the properties that help the script detect your users' browser. Note its general syntax:

dataBrowser: [
    {
        prop: window.opera,
        identity: "Opera",
        versionSearch: "Version" // note: no comma
    },
    {
        string: navigator.userAgent,
        subString: "MSIE",
        identity: "Explorer",
        versionSearch: "MSIE" // note: no comma
    } // note: no comma
];

The [] define an array literal, and all of its elements are object literals. Each object literal is enclosed in curly braces {} and contains a few properties (name: value,). Note that a comma between the objects and between the properties is required, but that the last comma is always forbidden.

Properties

Every object in the dataBrowser array can contain the following properties:

string and subString properties. These say: "search for subString in string". If the subString is found, the browser is identified. a prop property. It says "see if prop is supported". If it is, the browser is identified. an identity string. This string becomes the value of BrowserDetect.browser. a versionSearch string. This is for searching for the version number (see below). If this property is absent, the identity string is used instead. Every object must contain either 1 or 2 (never both!), must contain 3 and may contain 4.

I know this question is a bit old but all the answers provided will detect both desktop and mobile Safari. To detect only one or the other, you can use this:

var inDesktopSafari = (navigator.userAgent.toLowerCase().indexOf('safari') !== -1 && navigator.userAgent.toLowerCase().indexOf('chrome') === -1) && typeof window.ontouchstart === 'undefined';

var inMobileSafari = (navigator.userAgent.toLowerCase().indexOf('safari') !== -1 && navigator.userAgent.toLowerCase().indexOf('chrome') === -1) && typeof window.ontouchstart !== 'undefined';