CSS platform specific hacks

Question

I would like to know if there is a way of targeting platforms with CSS, that is different operating systems- Windows 7, Windows 8, Linux etc...

I have a stylesheet, with a ul list and a border-bottom setting that changes color when hovering over the menu element. Problem is, that the li items does not not display the same between Windows 7 and Windows8/Ubuntu, on all browsers (Chrome, FF IE etc...)I tried using different css properites such as line height, padding, margin etc, but no matter what I do, the layout of the items are not the same between the win7 and win8/ubuntu. I tested on various PC's and I tested between same versions of browsers(latest Chrome, latest FF, IE9...)

So can I target say Windows 8 with a css hack? Or just Ubuntu/Linux?

Answer 1

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, 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 */

@supports (-ms-ime-align:auto) {
    .windows,.win10 {
        color:red;
    }
}

note: the previous -ms-accelerator:true method got changed in newer versions, and so that one can be used to target specific versions of edge, but not all of them. -ms-ime-align:auto works for all of them still in 2017.

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

As of Firefox 49, Firefox no longer supports Mac OS X before version 10.9 so if you have version 48 or less it must be OS X version 10.8 or older, or if you have versions between 17-48 it must be OS X 10.6-10.8 by that same token.

iOS (iPad and iPhone) did not have a version of Firefox when I wrote this, so Firefox with OS X font smoothing really does only cover Mac computers only, not Apple mobile devices at this time. Like Chrome for iOS, Firefox for iOS uses the Safari engine so uses the Safari hacks on iPads and iPhones. So they both are targetable -- as Safari, but are secretly not what they say they are under the hood.

By negating both at once, we have a way to target what is left: Android/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 </div>
<div class="mac10_6"> If this is Mac OS X 10.6 only this is red </div>

<div class="lindroid"> If this is Linux or Android this is red </div>

Per Safari:

<div class="mac_osx"> If this is a Mac using Safari
(desktop or laptop computer) this is red (includes old mobile devices but not before iOS 6) </div>

<div class="mac_or_mobile"> If this is a Mac or a mobile device using Safari
(Android or iPad/iPhone) this is red </div>

<div class="retina"> If this is a hi-def mobile device using Safari
(Android or iPad/iPhone) this is red </div>

Additional notes on detection...

Windows versions based on Internet Explorer/Edge (for ease of reference):

As stated above if you detect Internet Explorer 6, you are using XP (or older Win)
If you detect Internet Explorer 7-8, you are using Windows XP, Vista, or Windows 7
If you detect Internet Explorer 9 you are using Windows Vista or Windows 7
If you detect Internet Explorer 10 you are using Windows 7 or Windows 8.0
If you detect Internet Explorer 11 you are using Windows 7 or Windows 8.0/8.1 or Windows 10
If you detect Microsoft Edge you are using Windows 10

Windows 10 is the current version of Windows at the time of this posting.

For historical interest, if you really want to, you could actually determine Internet Explorer 5 or less on a Mac with an old hack I have found:

/*\*//*/ .mac_internet_explorer { color:red; } /**/

The Mac version of Internet Explorer was only available on the old PowerPC Macs, not the Intel models.