Detect Browser then Display Appropriate CSS

Well just as the title suggests. Can anybody tell me how I would accomplish this?

I don't know the answer but searching the web found

http://www.brunildo.org/test/csshacks3.html
http://www.stylegala.com/articles/no_more_css_hacks.htm
http://www.cssplay.co.uk/menu/conditional.html

that show some different options.

david_kw

Well just as the title suggests. Can anybody tell me how I would accomplish this?

You could also consider a php script.

<!--
if(navigator.appName == "Microsoft Internet Explorer")
{
document.write('<link rel="stylesheet" type="text/css" href="ieStyle.css" />')
}

else
{
document.write('<link rel="stylesheet" type="text/css" href="mainStyle.css" />')
}
//-->


That is how I did it.

Just put the full App name at the top if statments.


example:

navigator.appName == Netscape


You can also add else if statements for more browsers.

You can also add the code name for Mozilla and Opera.

example:

navigator.appCodeName == Mozilla

--For Firefox and Mozilla

Finally, to be really specific you can even specify browser version

Example:

navigator.appVersion == 5.0

Of course most browsers set the namigator.appName to "Microsoft Internet Explorer" and so you may as well just insert the IE stylesheet if you are going to do it that way. If you really want to apply different styles for IE to correct the page so it appears the same in all browsers then you code your HTML as follows (no Javascript required).

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