Thursday, May 2, 2013

Separate CSS for Windows OS Versions using javascript

Windows 8 is way too weird compared to Windows 7, and it is a lot difficult to manage our website on both operating systems, because the browsers are same - for example: IE 10 for WIN7 and WIN8 renders page differently.

Here's how we can link separate CSS file for different Windows OS versions:

For Windows 8 -
var usAg = navigator.userAgent;
if(usAg.indexOf("NT 6.2") != -1) {
    //Your css for Windows 8 here
    //alert('Windows 8');
    var head= document.getElementsByTagName('head')[0];
    var addCSS= document.createElement('link');
    addCSS.href = 'css/win8.css';
    addCSS.rel = 'stylesheet';
    addCSS.type = 'text/css';
    head.appendChild(addCSS);
};

For Windows 7 -
var usAg = navigator.userAgent;
if(usAg.indexOf("NT 6.1") != -1) {
    //Your css for Windows 7 here
    //alert('Windows 7');   
};

For Windows XP -
var usAg = navigator.userAgent;
if(usAg.indexOf("NT 5.1") != -1) {
    //Your css for Windows XP here
    //alert('Windows XP');   
};