how do call different css for corresponding browsers like using jquery

Question

This is already asked http://stackoverflow.com/questions/848227/how-do-call-specific-css-for-specific-browser-using-jquery

I want to use one css file for safari and other for Mozilla and other for IE

Answer 1

You can sniff the browser and then create a link element and append it to the head tag.

if(jQuery.browser.msie)
    $('head').append('<link href="css/ie.css" rel="stylesheet" />');
... // and so on.

EDIT: Reference for jQuery.browser.

Answer 2

You should probably do this on server-side (or even better, not at all). But if you wan't to do this client side you need something like this.

var writeStyleSheet = function(url){
    var linkTag = document.createElement('link');
    linkTag.type = 'text/css';
    linkTag.rel = 'stylesheet';
    linkTag.href = url;
    linkTag.media = 'screen';
    document.getElementsByTagName("head")[0].appendChild(linkTag);
}
if(jQuery.brwoser.msie){
    writeStyleSheet('ie.css');
}
else if(jQuery.browser.safari){
    writeStyleSheet('safari.css');
}
else if(jQuery.browser.mozilla){
    writeStyleSheet('mozalla.css');
}

Note however that jQuery.browser is deprecated in 1.3. You should create a stylesheet that works on all browsers. Possibly add some conditional comments for IE specific hacks:

 <!--[if IE]>
  <link type='text/css' href='ieHacks.css' rel='stylesheet' />
 <![endif]-->

Answer 3

you can detect browser using $.browser object.

to get required stylesheet I got following from this blog entry

$(document).ready(function() {
    $("a").click(function() {
        $('head').append('<link rel="stylesheet" href="style2.css" 
         type="text/css" />');
    });
});

here is another nice post by Kelvin Luck that describes replacing and applying styles dynamically using jquery.