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>
<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 (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.

IT Director/Senior Software Engineer, Photographer I test and create new CSS web page formatting hacks for BrowserHacks.com for the purpose of repairing web sites. PS-- CSS hacks are fun, but please attempt good CSS first unless in a bind.

Tagged with: , , , , , , , , , , , , , , , , , , ,
Posted in Apple, Chrome, Computers, Cool Code, CSS, CSS Hacks, Firefox, Hacks, Internet Explorer, Linux, Macintosh, Microsoft, OS, OS X 10.10 Yosemite, OS X 10.6 Snow Leopard, OS X 10.7 Lion, OS X 10.8 Mountain Lion, OS X 10.9 Mavericks, OS_Targeting, Safari, Software, Spartan, Tech, Vista, Web, Web Browser, Web Browsers, Windows, Windows 10, Windows 7, Windows 8, Windows 8.1, Windows Vista, Windows XP
One comment on “OS/Platform Specific CSS Hacks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s