How to call different css for respective browsers, for example using jquery
This is already set how to call browser specific css using jquery
I want to use one css file for safari and others for Mozilla and others for IE
You should probably do it server side (or even better, not all). But if you won't be doing this client-side then 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 has been deprecated in 1.3. You must create a stylesheet that works in all browsers. It is possible to add some conditional comments for IE hacks:
<!--[if IE]>
<link type='text/css' href='ieHacks.css' rel='stylesheet' />
<![endif]-->
a source to share
You can sniff the browser and then create an element link
and add it to the tag head
.
if(jQuery.browser.msie)
$('head').append('<link href="css/ie.css" rel="stylesheet" />');
... // and so on.
EDIT: Link for jQuery.browser .
a source to share
you can detect the browser using the $ .browser object.
to get the stylesheet I needed I got the following blog post post
$(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 dynamic replacement and styling with jquery.
a source to share