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.

Answer 1

(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.

Answer 2

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

Answer 3

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

Detect Safari using jQuery