How to target Mac with CSS or Javascript_问答_开发者

How to target Mac with CSS or Javascript

开发者 https://www.devze.com 2023-02-14 07:55 出处：网络

I need to use specific styles for Mac in my stylesheet. What i开发者_开发技巧s the best way to do it?In an ideal world you shouldn\'t need to fork styles for different os. However sometimes a specific

I need to use specific styles for Mac in my stylesheet. What i开发者_开发技巧s the best way to do it?

In an ideal world you shouldn't need to fork styles for different os. However sometimes a specific design will require it - particularly with styling form elements.

If you really have to, the following script will set a class on 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 execute this in the html head which means the page doesn't re-render after the initial loading.

You can then use mac specific css rules like so:

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

Note: The best thing to do is find a solution that doesn't require forking for the OS.

or JavaScript

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

But really, this is bad practice and you shouldn't do it.

The navigator.platform property returns 'MacIntel' on OS X Safari, Chrome and Firefox (I don't have any PPC boxes at hand). If I would do it, I would check for that, and probably put in a class named .mac on the <BODY> tag and use that as a basis for the Mac-specific stuff.

Only for mac:

 <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 like johnhunter's solution, only that it is minified.