How to target Safari for Mac only?

Question

Hi I've cross browser fixed a site on all thinkable PC browsers, including Safari. Now my smart ass designer sent me a screen shot of the whole layout collapsing on mac. I have an idea how to solve it (reduce the margin on an element by a few pix), but i don't know how to target Safari only, preferably Safari mac only.
What's the best way to do this?

Answer 1

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.

Answer 2

The user agent string contains operating system information, and you are probably already checking the user agent string for the browser type.

A mac browser will have the string "Mac OS X 10." in the user agent string.