It should go without saying that you want your web pages to display properly, no matter what system your site’s visitor is using. Problem is, PCs and Macs have a nasty habit of rendering things like spacing, line-heights, and typography differently.
I used to have a crude and hackish way of inserting custom CSS via JavaScript if the user was using a Mac. Today I took some time to reassess the problem and refine the solution a bit. The end result? One (ish) line of JavaScript that I like to call macfix:
<script type="text/javascript">var OSName;if(navigator.appVersion.indexOf("Mac")!=-1){document.getElementsByTagName('body')[0].className+='mac';};</script>
It’s a very simple function, as you can see – it just adds the class “mac” to your page’s body element if your user is using a Mac. After this, you’re on your own – you’ll have to look at your page on a Mac, see how it renders, and then work out what else needs to be done using the body.mac CSS rule.
Check it out for yourself – I’ve put up a simple demo here.
If this simple script has helped you, or you have suggestions or improvements, please get in touch by email or using the comments below!
Web developer at