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.