OS/Platform Specific CSS Hacks

These are my legal CSS Hacks for fixing web browser quirks or outright bugs. Please enjoy, I have been working on them for years. May it help you if you need them. Please read here first: [What are these CSS Hacks Anyway?] Then check my [Live CSS Hacks Test Page] and also [BrowserHacks.com] where I sent new hacks and test submissions for the site.

Is it possible to target a specific computer or OS with CSS Hacks?

There is a way to do some of this by nature of the browser you are using, a little deductive reasoning, and a few tricks… not everything will do it but there are a few you can use for OS targeting with CSS only. Scripting offers more options of course. This reflects about 6 months of research and work on my part for accuracy as noted in the text below.

At this time I do not know of a way to do this with Chrome and I have not looked into Opera, especially now that it uses much of the same methodology as Chrome. Chrome did not release a version for Mac until version 3. Also for a Mac, Google has issued a statement that OS X 10.6-10.8 will not be supported after Chrome 49 so Chrome 50 and newer will indicate Mac OS X 10.9 (Mavericks) or newer.

Firefox, Internet Explorer/Edge, and Safari have better options though.

Firefox 4 and newer can detect that a Windows theme is being used, so even old versions of Firefox will at least detect whether you are or are not using Windows. I created this a while back and tested this again today:

@media screen and (-moz-windows-theme) {
    .windows {
        color:red;
    }
}

By the same token, this one works for anything but Windows, again for Firefox 4 and newer:

@media not screen and (-moz-windows-theme) {
    _:-moz-ui-valid, .nonwindows {
        color:red;
    }
}

-moz-os-version was added in firefox 25 media queries but only has a few options according to the mozilla documentation from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

OS’s: windows-xp | windows-vista | windows-win7 | windows-win8 | windows-win10

This set therefore only works in modern Firefox browsers version >= 25. At the time of this posting update, Firefox is version 35.

@media screen and (-moz-os-version:windows-xp) {
    .windows,.winxp {
        color:red;
    }
}

@media screen and (-moz-os-version:windows-vista) {
    .windows,.vista {
        color:red;
    }
}

@media screen and (-moz-os-version:windows-win7) {
    .windows,.win7 {
        color:red;
    }
}

@media screen and (-moz-os-version:windows-win8) {
    .windows,.win8 {
        color:red;
    }
}

@media screen and (-moz-os-version:windows-win10) {
    .windows,.win10 {
        color:red;
    }
}

Microsoft’s Edge Browser (Formerly Spartan) is at this time only in Windows 10. To detect it:

/* Microsoft Edge Browser (12+ = ALL) */

@supports (-ms-accelerator:true) {
    .windows,.win10 {
        color:red;
    }
}

There are also ways to detect Macintosh computers as well.

Firefox >= 24 introduced a new scrollbar overlay method for OS X 10.7 Lion and newer that is detectable with a media query:

@media screen and (-moz-overlay-scrollbars) {
    .mac,.mac10_7up {
        color:red; 
    } 
}

Firefox >= 25 also has a way to detect Mac OS X since they added support for OS X font smoothing in version 25:

@supports (-moz-osx-font-smoothing:auto) {
    .mac,.mac10_6up {
        color:red;
    } 
}

Because @media queries and @supports filters can nest within each other, the following is now possible — in order to target JUST OS X 10.6 Snow Leopard with Firefox 24 and newer:

@supports (-moz-osx-font-smoothing:auto) {
  @media not all and (-moz-overlay-scrollbars) {
    .mac,.mac10_6 {
        color:red; 
      }
    } 
}

Firefox 17 and above only support Mac OS X 10.6+ (Snow Leopard and newer) so if you have results from any of the above OS X CSS rules, you are not using OS X 10.5 or older. (https://en.wikipedia.org/wiki/History_of_Firefox#Version_17_.28ESR.29)

Conversely, again in Firefox 25+ it is possible to negate OS X (10.6 and newer) — Since 10.5 and older do not support this version of Firefox, it means this one is not Mac at all:

@supports (-moz-appearance:none)
  and (background-attachment:local)
  and (not (-moz-osx-font-smoothing:auto)) {
    .nonmac {
        color:red; 
    } 
}

iOS (iPad and iPhone) do not (yet…? will they ever?) have a version of Firefox, so Firefox with OS X font smoothing really does only cover Mac computers only, not Apple mobile devices at this time.

By negating both at once, we have a way to target what is left: Anrdoid/Linux, again with Firefox 25 and newer:

@supports (-moz-appearance:none)
  and (background-attachment:local)
  and (not (-moz-osx-font-smoothing:auto)) {
    @media not screen and (-moz-os-version) { 
       .lindroid {
           color:red; 
       }
    } 
}

If you are using Internet explorer, version 6 or newer (Windows XP and newer) then you are clearly using windows no matter what. That can be determined in more than one way as well.

Conditional comments existed in windows up until internet explorer 9, so those can be used to gather more information:

This only detects that you have windows, but not necessarily the version because Internet Explorer 6-9 only existed on the windows platform. At this time, Internet Explorer 11 is the current version so this does not detect 10 and 11, but 9 and before:

<!--[if (gte IE 6)&(lte IE 9)]><style type="text/css">

    .windows {
        color:red;
    }

</style><![endif]-->

Internet Explorer 6 only existed in Windows XP, or older Windows versions no longer used today, so this works for that one:

<!--[if (IE 6)]><style type="text/css">

    .windows,.winxp {
        color:red;
    }

</style><![endif]-->

Internet Explorer 7 existed in Windows XP Vista and also is often emulated when you click the compatibility mode choice in Internet Explorer 8 or newer however. This one works if you are using Internet Explorer 10 or newer, so you have windows 7 or 8.

@media screen and (-ms-high-contrast:active),
 (-ms-high-contrast:none) { 
    .windows {
        color:red;
    }
}

One of my creations that I personally crafted detects Internet Explorer 11 or newer, which is available for Windows 7 and newer, up to 8.1.

_:-ms-fullscreen, :root .windows { 
    color:red; 
}

If you don’t want to use Internet Explorer Conditional Comments but would rather Media Queries, these do exist:

To detect Internet Explorer 6-7 (therefore Windows XP and older up to Windows 7) this works:

@media screen\9 
{
    .windows {
        color:red;
    }
}

This one I created for Internet Explorer 9 since none existed. (so win 7 or win vista)

@media screen and (min-width:0\0) and (min-resolution:.001dpcm) 
{
    .windows {
        color:red;
    }
}

This detects Internet Explorer 8 (Therefore windows XP-windows 7)

@media \0screen
{
    .windows {
        color:red;
    }
}

I crafted this media query from various other parts over the last year, and It handles Safari 6.1 and newer. Safari is version 7 at the time of this posting. Macs and mobile devices such as the base Android browser, will be detected in this fashion:

@media screen and (-webkit-min-device-pixel-ratio:0)
 and (min-color-index:0)
{
    .mac_or_mobile {(;
        color:red;
    );} 
}

Here is a better way to detect for most newer macs, and NOT include mobile devices such as iPads (or Androids) – Again it is for Safari 6.1 and newer, so it is a Mac…:

@media screen and (-webkit-max-device-pixel-ratio:1)
 and (min-color-index:0)
{
    .mac_osx {(;
        color:red;
    );} 
}

If you want the mobiles instead, this works for recent hi-definition ones:

@media screen and (-webkit-min-device-pixel-ratio:1.1)
 and (min-color-index:0)
{
    .retina {(;
        color:red;
    );} 
}

I have more about mobile phones and tablets here: https://jeffclayton.wordpress.com/2014/07/22/css-for-hi-def-mobile-retina-devices/ and here: https://jeffclayton.wordpress.com/2014/07/28/css-hack-anything-but-ios/

Mac did have Internet Explorer for a while, but did not make newer versions after version 5.5.

Windows did have Safari for a while as well, but did not make newer versions after version 5. Most windows users never use Safari, so you could generally rule out windows when Safari is detected.

If you include all of the above styles into a document, the divs below will reflect the results of the styles from above:

Per Firefox and Internet Explorer/Edge:

<div class="windows"> If this is Windows this is red </div>

<div class="winxp"> If this is Windows XP or older this is red </div>

<div class="win10"> If this is Windows 10 this is red </div>

Per Firefox:

<div class="vista"> If this is Windows Vista this is red </div>
<div class="win7"> If this is Windows 7 this is red </div>
<div class="win8"> If this is Windows 8 this is red </div>

<div class="nonwindows"> If this is NOT Windows this is red </div>

<div class="nonmac"> If this is NOT Mac OS X this is red </div>

<div class="mac"> If this is Mac OS X this is red </div>

<div class="mac10_7up"> If this is Mac OS X 10.7 or newer this is red </div>
<div class="mac10_6up"> If this is Mac OS X 10.6 or newer this is red </strong>

<div class="mac10_6"> If this is Mac OS X 10.6 only this is red </strong>