Different CSS file for Different Browsers

Question

Hi all,

I want to use different css file for different browser type. Is there any sinmple HTML code which can detect different types of browsers and include different css files ??

Answer 1

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.

Answer 2

I know only for ie:

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

also js detection

Answer 3

It is usually easier to use 'hacks' within the same stylesheet.

This is not to condone their use (as I don't want to be modded down by evangelists :))

http://www.webmonkey.com/tutorial/Browser-Specific%5FCSS%5FHacks

http://www.dynamicsitesolutions.com/css/filters/support-chart/

http://ajaxian.com/archives/css-browser-hacks

http://www.456bereastreet.com/archive/200411/the%5Funderscore%5Fhack/

For the different IE versions (usually the most important) there is a conditional IE 'if' which can handle lots of parameters: http://www.quirksmode.org/css/condcom.html

Answer 4

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\">");
}
else if 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.

Answer 5

Conditional HTML comments works if you're trying to include CSS files specific to Internet Explorer. See this quirksmode article for more information.

For other browsers, you'd have to either use JavaScript or server-side detect which browser the visitor is using, and depending on the result, include the suitable CSS file. Another great article on quirksmode about that here.

Answer 6

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"&gt;';

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.

Answer 7

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.

Answer 8

You should consider to change your wish to use different style sheets for different browsers.

Almost everything is possible to do with the same style sheet for all browsers. It requires a bit more work for making a clean markup and using robust styles, but what you gain is not just fewer css files, but a page that is very likely to work also in browsers that you have never heard of, and future versions of the browsers. Also a well thought out markup makes the page accessible for blind surfers, and it makes the job easier for search engines so that they are likely to index more of your content.

That is what I have used on our company's web site. I didn't have to change a single thing to make it work when IE 8 was released. :)

Note that a proper doctype is crucial for getting a concistent behaviour across browsers. Without it IE emulates most rendering errors back from IE 4, including an incorrect box model.