CODEWITHSUNDEEP
javascriptjquerycss
Pramod
Pramod

Reputation:

how do call different css for corresponding browsers like using jquery

This is already asked 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

Upvotes: 0

Views: 2488

Answers (3)

TheVillageIdiot
TheVillageIdiot

Reputation: 40512

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.

Upvotes: 0

Pim Jager
Pim Jager

Reputation: 32129

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]-->

Upvotes: 2

Kirtan
Kirtan

Reputation: 21685

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.

Upvotes: 0

Related Questions