Conditional CSS targeting Windows 7

Question

I can find numerous discussions like this on the web however I cannot find anyone to particulary target my problem:

I use Google Webfonts for a site. On all platforms except Windows 7 the fonts look good. But on Windows 7 I need to adjust the font weight for some of the font versions. I can successfully use a conditional statement for IE 9, but how do I actually target FF and Chrome in Windows 7 only? The font rendering in Win XP (IE 8 and below, and also FF, Chrome) is perfect, and also Mac OS is fine (FF, Safari, Chrome).

I found many hacks but none that changes CSS for a specific windows version unregarding browser...???

Thanks in advance!

Answer 1

It can't be done without JavaScript. Specifically, you need to check navigator.userAgent's value. If it contains NT 6.1, then it means the client is running Windows 7. NT 6.0 is for Windows Vista, and NT 5.1 is Windows XP. There is no way to do this using pure CSS, unfortunately.

A sample:

var usAg = navigator.userAgent;
if(usAg.indexOf("NT 6.1") != -1) {
    //Windows 7, apply styles here, for instance:
    var el = document.getElementById("your_id");
    el.style.fontWeight = "700";
}

I hope that helped!

Answer 2

You would have to use Javascript to detect Windows 7. Here's an example:

<script type="text/javascript">
  window.onload = function () {
    if (navigator.userAgent.indexOf('Windows NT 6.1') > 0)
      document.head.innerHTML += '<link rel="stylesheet" type="text/css" href="path/to/css" />'
  }
</script>

Answer 3

I recommend the script http://cssuseragent.org/.

Here is how you would detect Windows 7 with cssua.js:

if (cssua.ua.windows_nt === "6.1") {
    /* target Win 7 and Win 2008 R2 */
}

Answer 4

Please check out: http://www.quirksmode.org/js/detect.html

Using the NT version of windows you can target the CSS.

Answer 5

Thanks everyone for fast answers! As I had jQuery installed this is how I solved it:

$(document).ready(function (){
   if (navigator.userAgent.indexOf('Windows NT 6.1') > 0)
   {
        $('body').css({'font-weight':'300'});   
   }
});