{"id":377,"date":"2011-10-17T18:46:05","date_gmt":"2011-10-17T18:46:05","guid":{"rendered":"http:\/\/www.sitekickr.com\/blog\/?p=377"},"modified":"2014-04-11T19:45:10","modified_gmt":"2014-04-11T19:45:10","slug":"mac-css-hack","status":"publish","type":"post","link":"https:\/\/www.sitekickr.com\/blog\/mac-css-hack\/","title":{"rendered":"Mac only CSS hack"},"content":{"rendered":"

If you know CSS, you know that the above just seems to good to be true. Well, it is!<\/p>\n

You really can’t make this happen without a little JavaScript. But, with a little JS, we can make our CSS much more complete.<\/p>\n

Let’s imagine that we wanted to apply a whole bunch of CSS rules to Mac OS X browsers only. Wouldn’t it be great if we could just do something like:<\/p>\n

p { line-height: 1.5em; }\r\n.mac-os p { line-height: 2em; }\r\n<\/code><\/pre>\n
Ideally, this would force all Mac OS X browsers to style paragraph tags with a 2em line height.<\/p>\n
Well, as I said before, with a little JavaScript, we can actually make this possible. The below example uses jQuery.<\/p>\n
if(navigator.userAgent.indexOf('Mac') > 0)\r\n$('body').addClass('mac-os');\r\n<\/code><\/pre>\n
Essentially, we’re adding the mac-os<\/em> class name to your body tag if a Mac OS operating system is detected, which makes the above CSS rules possible!<\/p>\n
Quick Tips<\/h3>\n
    \n
  1. You may not have the jQuery library loaded, in which case, this is easily done with “traditional” JavaScript:document.getElementsByTagName('body')[0].className += \" mac-os\";<\/code><\/li>\n
  2. If you wish to target only Webkit browsers on the Mac (Safari and Chrome), you can couple this tip with webkit’s proprietary media query as follows:\n
    @media screen and (-webkit-min-device-pixel-ratio:0) {\r\n\/* this will target only Mac Safari and Chrome browsers *\/\r\n.mac-os p { line-height: 2em; }\r\n}<\/code><\/pre>\n<\/li>\n
  3. Similarly, if you wanted specific styles to target individual Mac browsers, you could do the following:\n
    if(navigator.userAgent.indexOf('Mac') > 0)\r\n$('body').addClass('mac-os');<\/code>if(navigator.userAgent.indexOf('Safari') > 0)\r\n$('body').addClass('safari');<\/code>if(navigator.userAgent.indexOf('Chrome') > 0)\r\n$('body').addClass('chrome');<\/code><\/pre>\n
    Then, within your CSS, you’re able to do something like the following:<\/p>\n
    .mac-os.safari p { line-height: 2em; }\r\n.mac-os.chrome p { line-height: 1.75em; }<\/code><\/pre>\n
     <\/li>\n
  4. Although these tricks may do the job, they may cause issues for you down the line. It may make sense to “reset” your CSS styles first. Each browser has a different set of defaults styles for each element (some might have a line height of 1em for paragraph tags while others have 1.25 em as the height).The best way to ensure consistency is to first set a base style for all elements. This technique is popular within WordPress themes but can be done easily by adding this one line of CSS to the beginning of your stylesheet:
    \nMinified CSS reset styles<\/a><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
    If you know CSS, you know that the above just seems to good to be true. Well, it is! You really can’t make this happen…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"amp_status":""},"categories":[12],"tags":[131],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/377"}],"collection":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/comments?post=377"}],"version-history":[{"count":9,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/377\/revisions"}],"predecessor-version":[{"id":2225,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/377\/revisions\/2225"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=377"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=377"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}