Friday, April 24, 2009

How to Load CSS According to browser using javascript.

We can load css dynamically as per browser versions.
here is the very simple function for loading css dynamically in any browser.
this javascript will work in all browsers which supports javascript.

function LoadCss()
{
var cssPath="";
if (navigator.appVersion.indexOf("MSIE 6.0") != -1)
{
cssPath="CssForIE60.css";
}
else if(navigator.appVersion.indexOf("MSIE 7.0") != -1)
{
cssPath="CssForIE70.css";
}
else
{
cssPath="GeneralCss.css";
}
var headID = document.getElementsByTagName("head")[0];
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = cssPath;
cssNode.media = 'screen';
headID.appendChild(cssNode);
}


Above function will Create Dynamic javascript element(link) and appent it with head of DOM.

this function also can be modified for loading css dynamically in DOM using javascript.
hope this will help you.

thanks.