How to Target Safari for MAC Only

How to target Safari for Mac only?

Here's a script you can include on your page (or in a separate js file) that will add a class to the html element so that you can add safari-mac specific css to your css file.

(function($){
    // console.log(navigator.userAgent);
    /* Adjustments for Safari on Mac */
    if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Mac') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
        // console.log('Safari on Mac detected, applying class...');
        $('html').addClass('safari-mac'); // provide a class for the safari-mac specific css to filter with
    }
})(jQuery);

Example css fixes, which can be in page or in your external css file etc:

/* Safari Mac specific alterations
 * (relies on class added by js browser detection above),
 * to take into account different font metrics */
.safari-mac #page4 .section p.fussyDesigner { margin-right: -15px; }
.safari-mac #page8 .section-footer { width: 694px; }

Thanks to other answers for ideas, I've tried to wrap everything up into a complete solution in this answer.

jQuery: Target ONLY Safari

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

How detect Safari browser ONLY on desktop?

const uA = navigator.userAgent;
const vendor = navigator.vendor;
if (/Safari/i.test(uA) && /Apple Computer/.test(vendor) && !/Mobi|Android/i.test(uA)) {
  //Desktop Safari
}

Target safari css, but not chrome

Found somewhere else here. worked fine for me

@media screen and (-webkit-min-device-pixel-ratio:0) { 
/* Safari and Chrome */
.myClass {
 color:red;
}

/* Safari only override */
::i-block-chrome,.myClass {
 color:blue;
}
}

CSS media query to target only iOS devices

Yes, you can.

@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */ 
}

@supports not (-webkit-touch-callout: none) {
  /* CSS for other than iOS devices */ 
}

YMMV.

It works because only Safari Mobile implements -webkit-touch-callout: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch-callout

Please note that @supports does not work in IE. IE will skip both of the above @support blocks above. To find out more see https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/. It is recommended to not use @supports not because of this.

What about Chrome or Firefox on iOS? The reality is these are just skins over the WebKit rendering engine. Hence the above works everywhere on iOS as long as iOS policy does not change. See 2.5.6 in App Store Review Guidelines.

Warning: iOS may remove support for this in any new iOS release in the coming years. You SHOULD try a bit harder to not need the above CSS. An earlier version of this answer used -webkit-overflow-scrolling but a new iOS version removed it. As a commenter pointed out, there are other options to choose from: Go to Supported CSS Properties and search for "Safari on iOS".

---

Related Topics