Different CSS files for Different Browsers

Question

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

Answer 1

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.

Answer 2

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

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

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

http://www.456bereastreet.com/archive/200411/the_underscore_hack/

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

You can use JavaScript to detect and change the css for different browsers but the code is a bit bulky.

<script type="text/javascript">

var nAgt = navigator.userAgent;
var browserName  = navigator.appName;
var nameOffset,verOffset,ix;

// In Opera, the true version is after "Opera" or after "Version"
if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
 browserName = "Opera";
}
// In MSIE, the true version is after "MSIE" in userAgent
else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
 browserName = "Microsoft Internet Explorer";
}
// In Chrome, the true version is after "Chrome" 
else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
 browserName = "Chrome";
}
// In Safari, the true version is after "Safari" or after "Version" 
else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
 browserName = "Safari";
}
// In Firefox, the true version is after "Firefox" 
else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
 browserName = "Firefox";
}
// In most other browsers, "name/version" is at the end of userAgent 
else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) < 
          (verOffset=nAgt.lastIndexOf('/')) ) 
{
 browserName = nAgt.substring(nameOffset,verOffset);
 fullVersion = nAgt.substring(verOffset+1);
 if (browserName.toLowerCase()==browserName.toUpperCase()) {
  browserName = navigator.appName;
 }
}

 if (browserName == "Microsoft Internet Explorer") {
 document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"../css/ms.css\">");
 }
 else if (browserName == "Firefox") {
 document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"../css/ff.css\">");
 }
 else {
 document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"../css/other.css\">");
 }

</script>