jQuery: Target ONLY Safari

Question

I'm using this bit of jQuery code to target Safari:

if ($.browser.safari) {
    $('#div1').css({'margin-top': '-22px'});
    $('#div2').css({'margin-top': '-17px'});
}

Oddly, it also targets Chrome (at least Mac version). What jQuery code can I use that would ignore Chrome and target only Safari?

I would be grateful for expert advice.

Unfortunately, that's not the case. I have something displayed perfectly well in Chrome and all messed up in Safari. — Dimitri Vorontzov, Jul 27 '11 at 18:18

Wulf · Accepted Answer · 2019-07-16T12:20:21.027

34

(Edit so that Chrome must not be in the user agent):

(Edit2 because Chrome for iOS has "CriOS" instead of "Chrome" in its user agent):

if (
    navigator.userAgent.indexOf('Safari') != -1 && 
    navigator.userAgent.indexOf('Chrome') == -1 && 
    navigator.userAgent.indexOf('CriOS/') == -1
)  { 
   //i.e. apply safari class via jquery
}

P.S. You should consider using Feature Detection to change your website according to what the current browser can do instead of checking for user agents, which you have to update regulary.

edited Jul 16 '19 at 12:20

answered Jul 27 '11 at 18:10

Wulf

3,878
2
22
36

Nope, it targets Chrome, too. Would appreciate more ideas from you. – Dimitri Vorontzov Jul 27 '11 at 18:14
3

The userAgent of Chrom is _Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13_, the userAgent of Safari is _Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1_. Perhaps you should do this: `if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1)` – Wulf Jul 27 '11 at 18:17
PERFECT. This last suggestion does exactly what I need: targets Safari and de-targets Chrome. Thank you, Wulf. – Dimitri Vorontzov Jul 27 '11 at 18:20
Its not validating in Chrome on iPhone. Giving success. Any solution to that? – anupal Jul 16 '19 at 05:48
Chrome for iOS has "CriOS/" in the name. So just validate, that "CriOS/" also doesn't exist in the UserAgent. Anyway, the question/comment is from 2011. Nowadays you show use feature detection instead of targetting specific user agents :) – Wulf Jul 16 '19 at 12:19

cutsoy · Answer 2 · 2011-07-27T18:16:15.273

4

if (navigator.userAgent.indexOf('Safari') && !navigator.userAgent.indexOf('Chrome')) {
    // Yep, it's Safari =)
}else {
    // Nope, it's another browser =(
}

edited Jul 27 '11 at 18:16

answered Jul 27 '11 at 18:10

cutsoy

10,127
4
40
57

Alas, that one also Safari / Chrome. What I need is the code that would only target Safari. Any suggestions? – Dimitri Vorontzov Jul 27 '11 at 18:17
1

I edited it, probably when you were typing :). Try it again ;)! – cutsoy Jul 27 '11 at 18:20
Thanks! Very helpful and confirms what I learned a few seconds ago from Wulf. Voted up. – Dimitri Vorontzov Jul 27 '11 at 18:25

score 1 · Answer 3 · edited May 23 '17 at 10:31

1

Feature detection is preferred over browser sniffing, but I did find this solution on SO:

Detect Safari using jQuery

edited May 23 '17 at 10:31

Community

1
1

answered Jul 27 '11 at 18:22

Joe Coder

4,498
31
41

Linking to an article without providing the solution in your own answer is discouraged. – Sean H Feb 03 '16 at 15:20
@Seano Can you link me to relevant guideline? – Joe Coder Feb 03 '16 at 17:48
Ah, you linked to an SO article. My bad. – Sean H Feb 03 '16 at 17:52

score 0 · Answer 4 · answered Nov 17 '17 at 11:49

0

This Works Fine to know whether browser is Safari.

if(navigator.userAgent.indexOf('Safari') !=-1 && navigator.userAgent.indexOf('Chrome') == -1)
{
    alert('its safari');
}else{
    alert('its not safari');
}

answered Nov 17 '17 at 11:49

Dushyant Dagar

1,019
10
17

score 0 · Answer 5 · answered Jul 27 '11 at 18:14

Try this:

$.browser.safari = ( $.browser.safari && /chrome/.test(navigator.userAgent.toLowerCase()) ) ? false : true;

I like this a little better because you're setting the jQuery property properly, and can then use it elsewhere without constantly checking on the userAgent.

jQuery: Target ONLY Safari

5 Answers5