Help with Browser Detection

**Moshambi** · 08-04-2008, 08:50 PM

OK so i am trying to run a stylesheet based on the browser. Just the actual browser not the version etc.

here is the code i am using:

Code:

<link id="sheet" name="sheet" rel="stylesheet" type="text/css" href="main_style.css" />
<link rel="stylesheet" type="text/css" href="ie_style.css" />

<script language="javascript">

function detect()
	var isIE = (navigator.appName == "Microsoft Internet Explorer");
	
	if(isIE)
	{
      document.styleSheets[0].disabled = true;
      document.styleSheets[1].disabled = false;   
  }
  else
  {
      document.styleSheets[0].disabled = false;
      document.styleSheets[1].disabled = true;
  }
}	

</script>

Now the else works in non-ie browsers but the if doesnt work in IE. I tried putting a document.write() in the if block and el;se block and i found that in IE it is running the if statement and not the else statement but it is not working. I am really confused about whats wrong. anyone who could help would be awesome. Thanks in advance!

**jscheuer1** · 08-05-2008, 02:26 AM

If that's all you want, use conditional comments:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css">
<![endif]-->
<!--[if !IE]> <-->
<link rel="stylesheet" href="all_others.css" type="text/css">
<!--> <![endif]-->
</head>
<body>

</body>
</html>

No javascript required.

However, there is a better way. The above is mutually exclusionary. IE gets one stylesheet, all others get another. Much duplication is likely between the two stylesheets. If you do it like so:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="main.css" type="text/css">
<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css">
<![endif]-->
</head>
<body>

</body>
</html>

then both IE and all others will get the main stylesheet. Only IE will get the ie.css, which will only need to have things in it that are different than the main styles.

**Moshambi** · 08-05-2008, 08:20 PM

thank you for your reply. i did not even think about using conditional comments.
I did however get a solution to my problem before i read this post...it was to replace the square brackets [ ] in the IE section to parentheses ( ). And you are correct about rewriting a lot of the same styles, but i noticed with the code i have by disabling them it still uses the styles from both stylesheets (at least mozilla does). Thank you again for your reply and i will probably have to change it to conditional since it would probably run faster too?

**jscheuer1** · 08-06-2008, 03:54 AM

The difference in run time would be so insignificant as to be negligible, but yes, comments should be faster. Browsers that don't qualify will see the part in the disqualifying area as an ordinary comment tag and breeze right through it. With branching javascript, all the code is parsed to make sure there are no errors or objects that it needs to pay attention to.

Unless I read your javascript wrong, it should be exclusionary, unless FF doesn't understand disabled with style in the way it's used in your code.

However, the javascript method has other pitfalls (besides requiring javascript being active on the client's browser). Since it relies upon sniffing, it can be spoofed by browsers that report themselves as IE even when they are not. No browser will follow the IE 'path' in a conditional comment unless it truly qualifies.

Thread: Help with Browser Detection

Thread Tools

Search Thread

Help with Browser Detection

Bookmarks

Bookmarks

Posting Permissions