Geek Answers Handbook

How to target your Mac using CSS or Javascript

I need to use certain styles for Mac in my stylesheet. What is the best way to do this?

+5
source share
4 answers

or javascript

if (navigator.userAgent.match(/Macintosh/))
    // do stuff for Macs here, such as load a stylesheet

But this is actually bad practice, and you should not do this.

+4
source

In an ideal world, you do not need to create plugs for different os. However, sometimes this will require a specific design - especially with style form elements.

If you really need to, the following script will set the class in the html element:

(function (flags, app) {
    os('Win', 'os-win');
    os('Mac', 'os-mac');

    if (document.documentElement) {
        document.documentElement.className += flags.join(' ');
    }

    function os (s, f) { if (app.indexOf(s) !== -1) flags.push(f); }

}([''], String(navigator && navigator.appVersion)));

You can do this in the html header, which means that the page will not be re-rendered after the initial load.

css Mac:

.os-mac #my-element { ... }

. , .

+6

The property navigator.platformreturns 'MacIntel'in OS X Safari, Chrome and Firefox (I don't have PPC boxes at hand). If I did this, I would take care of this and possibly put a class with the name .macin the tag <BODY>and use it as the basis for Mac-specific materials.

+1
source

For mac only:

 <script>(function(e,t){function n(n,r){if(t.indexOf(n)!==-1)e.push(r)}n("Mac","os-mac");if(document.documentElement){document.documentElement.className+=e.join(" ")}})([""],String(navigator&&navigator.appVersion))</script>

It works as a johnhunter solution, only its miniature.

+1
source

More articles:


All Articles