How to Change CSS According to User Operating System

How to change CSS according to user Operating System

You cannot do this with pure CSS, you can detect OS like MAX or WIN with JavaScript, and then use that to load different CSS styles.

You can use the result of window.navigator to find information about the OS.

console.log(window.navigator);

OS-Specific CSS?

CSS Browser Selector should help.

change CSS according to OS in angularjs

Here's a solution that you might be looking for. Just use this code

// This script sets OSName variable as follows:
// "Windows"    for all versions of Windows
// "MacOS"      for all versions of Macintosh OS
// "Linux"      for all versions of Linux
// "UNIX"       for all other UNIX flavors 
// "Unknown OS" indicates failure to detect the OS

var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";

if (OSName == "Windows"){$(document.body).append("<link rel='stylesheet' type='text/css' href='this.css'>")}

// etc...

Reference

You can also use userAgent too

Target Operating system with CSS?

You can use msie conditional comments to target different msie versions:

<!--[if IE 7]><body class="lt-ie10 lt-ie9 lt-ie8 ie7"><![endif]-->
<!--[if IE 8]><body class="lt-ie10 lt-ie9 ie8"><![endif]-->
<!--[if IE 9]><body class="lt-ie10 ie9"><![endif]-->
<!--[if gt IE 9]><!--><body><!--<![endif]-->

You can use some media queries inside css to filter webkit/moz:

@media screen and (-webkit-min-device-pixel-ratio:0) {

    button>span+span, .button>span+span {
        margin-left: 7px;
    }

}

And for everything else, you can use javascript to find out things like jQuery/Javascript to detect OS without a plugin?

But, the thing is, try to fix it without all that stuff first.

UPDATE:

You are wrapping li's with a's, maybe that's why you are getting inconsistent behavior.

Try this: http://jsfiddle.net/cwNKX/1/

HTML

<div id="menu">
    <div>
        <a href="#">Home</a>
        <a href="#">Biography</a>
        <a href="#">Works</a>
        <a href="#">Media</a>
        <a href="#">Contact</a>
    </div>
</div>

CSS

#menu {
    position: relative;
    width: 587px;
    height: 208px;
    background: #fbfbfb url("http://phillipeldermusic.com/images/drumKeyboard.png") no-repeat -1522px 0;
}

#menu div {
    position: absolute;
    bottom: 0;
    right: 477px;
    width: 110px;
}

#menu a {
    display: block;
    padding: 5px;
    text-align: right;
    font-family: Cabin, sans-serif;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    color: #000;
    border-radius: 15px 0 0 15px;
}

#menu a:hover {
    color: #fff;
    background-color: #000;
}

#menu a + a {
    margin-top: 3px;
}

And btw, resize that background image.

How to Change CSS According to User Operating System