Different Css Files For Different Browsers

I want to use different CSS files for different browser types. Is there any simple HTML code which can detect different types of browsers and include CSS files accordingly?

Solution 1:

Don't use CSS hacks, Javascript to switch style sheets or anything like that.

I've never ever had to use multiple style sheets for different browsers or any invalid CSS hacks.

Its not needed. The conditional comments are useful for maybe IE6 and below for the PNG fix stuff, but appart from that, if you know CSS and the various browser bugs you can easily code XHTML and CSS for IE 5.5 without many problems.

Solution 2:

This is a javascript type thing. Javascript is very good for browser selection. Just use the browser detection to point to a different css file.

Put something like this in the head:

<script type="text/javascript">var browser=navigator.appName;
if browser =="Microsoft Internet Explorer" {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"IE.css\">");
}
elseif browser =="Firefox" {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"FF.css\">");
}
else {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"generic.css\">");
}
</script>

I can't confirm the js but that is along the lines of what you need to do.

Solution 3:

you have to use the server side to do that on all browser. If you choose the server side way, you would have to parse the User-Agent header and add the valid CSS from that parsing. I advise you not to do that because User-Agent parsing is a tedious task and there is more elegant way to deal with browser quirks.

Worth to be noted that if you are interested only adding special CSS rules(files) for Internet explorer there is a special syntax:

<!--[if lte IE 6]>

for IE 6 and up

Also please note there is some CSS framework to avoid to have per browser rules. The biggest one in my opinion is probably YUI 3 Grid. This would give you the same look and feels on all browsers if used properly.

Solution 4:

I know only for ie:

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

also js detection

Solution 5:

There are several different techniques for browser-dependent stylesheets:

1) Like already said, you can use conditional statements to detect IE versions, e.g.

2) If you're using server-side language like PHP, Ruby etc., you can detect browser based on HTTP_USER_AGENT server variable, e.g.

if(preg_match('/^Mozilla\/.*?Gecko/i',$agent)){
    print"Firefox user."; $firefox = true;
    // process here for firefox browser
}

This technique is powerful because you can detect virtually any browser and based on this you can include (or print, to be precise) any required .css file into your PHP template. E.g.

if ($firefox) print'<link rel="stylesheet" href="http://site.com/firefox.css">';

The advantage of this technique is that it occurs earliest, even before the page starts getting sent to user and you can detect browser version very exactly.

3) And of course you can detect browser version with javascript, this requires just a couple variables, e.g.

var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);

But the a code analyzing values of this variables should be used, like in this example.