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

score 8 · Accepted Answer · answered Mar 15 '11 at 05:03

8

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

answered Mar 15 '11 at 05:03

Prakash

6,562
3
25
33

score 7 · Answer 2 · edited Jun 20 '20 at 09:12

7

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 14 '11 at 12:43

alex

479,566
201
878
984

@alex The previous one worked, but for both safari and chrome browser.And `/OS X.*Safari/ ` didn't worked out – Prakash Mar 14 '11 at 12:50
@Prakash See updated, it now only matches Safari (not Chrome). – alex Mar 14 '11 at 12:50
I looked at jsfiddle's link that u've given, it's not working.. the background is red – Prakash Mar 14 '11 at 12:58
@Prakash What version of Safari are you using? It worked in my 5.0.3. Also, can you post your `navigator.userAgent` ? – alex Mar 14 '11 at 13:01
I've posted on my question navigator.useragent – Prakash Mar 15 '11 at 04:55
I've tried with changing your code. I replaced `(/OS X.*Safari/)` to `(/AppleWebKit/)` and it worked fine. +1 vote up for your help – Prakash Mar 15 '11 at 04:58

Jon Egerton · Answer 3 · 2013-09-11T09:19:22.160

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.

Yes that worked, but I don't want to put all those long javascript codes on my project. anyway I find out one line solution. Thanks for help with my +1 vote. — Prakash, Mar 15 '11 at 05:01

score 0 · Answer 4 · answered May 20 '13 at 15:42

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';

So long as Apple don't come out with a touch-enabled desktop device. — alex, Sep 11 '13 at 05:20

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

4 Answers4

JavaScript

CSS

Linked