Is there a CSS media query to detect Windows?

Question

I want to specify two slightly different background colors, one for Mac OS, one for Windows.

Answer 1

there is no property to specify OS used to view webpage, but you can detect it with javascript, here is some example for detecting Operating system :

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";

console.log('Your OS: '+OSName);

got it?, now you can play with document.write to write download stylesheet for specific Operating system. :)

another example, i assumed that you are using jquery.

if (navigator.appVersion.indexOf("Win")!=-1) 
{
  $(body).css('background','#333');
} else {
  $(body).css('background','#000'); // this will style body for other OS (Linux/Mac)
}

Answer 2

In CSS, not possible. At most there's a @media filter so you can target mobile devices v.s. desktop devices, but there's no @os type filter.

You can achieve it with IE's conditional tags:

<link rel="stylesheet" href="everyone.css" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->

Put the mac-specific styles into the 'everyone' css, and then override whatever's necessary in the IE version.

Of course, this will fail if you get a user who's on an (ancient) IE for Mac version, but should cover all modern users.

Answer 3

it is available in the latest mozilla version.

-moz-os-version provides following values:

• windows-xp
• windows-vista
• windows-win7
• windows-win8

support is limited https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

@media (-moz-os-version: windows-xp), (-moz-os-version: windows-vista),
(-moz-os-version: windows-win7), (-moz-os-version: windows-win8) {
    body{
        background-color: white;
    }
}

Answer 4

Older versions of Firefox could also detect windows (for those who are not using autoupdate) and are using version 4 or newer. It is more basic and does not tell the version, just the fact you are in windows. I created this one for testing a while back because I was curious.

@media screen and (-moz-windows-theme) {
    body {
        background-color: white;
    }
}

this is also covered in https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries