Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How can I target specific IE (windows) browsers using just HTML?

Browser

How can I target specific IE (windows) browsers using just HTML?

by  BabyJeffy  Posted    (Edited  )

Many people were introduced to [link http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp]conditional comments[/link] with the introduction of IE7 and their grass-roots [link http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx]call to action[/link] to stop using "CSS Hacks" to target specific IE browser versions.

Conditional comments are totally valid markup (for HTML as well as XHTML doctypes) that cause IE browsers running in Windows (the old Mac versions of IE ignored them completely) to parse the contents of the commented markup.

The following code shows how a conditional comment can be used to match "all versions of IE less than version 7" and include an extra css file and an extra div in the content of the page:
Code: 
<html>
<head>
   <link href="default.css" type="text/css" rel="stylesheet" />
   <!--[if lt IE 7]>
      <link href="iexplore.css" type="text/css" rel="stylesheet" />
   <![endif]-->
</head>
<body>
   <h1>Testing</h1>
   <!--[if lt IE 7]>
      <div>I'm an old IE running in Windows</div> 
   <![endif]-->
</body>
</html>
Because of the start HTML comment code (<!--), everything until the close HTML comment code (-->) is treated as a comment for non matching IE Windows browsers. The code that is actually rendered by the browser is different when viewed in IE Windows browsers older than IE7 and any other browser:
[code rendered pre-IE7 browsers]<html>
<head>
<link href="default.css" type="text/css" rel="stylesheet" />
<link href="iexplore.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>Testing</h1>
<div>I'm an old IE running in Windows</div>
</body>
</html>[/code]
[code rendered all other browsers]<html>
<head>
<link href="default.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>Testing</h1>
</body>
</html>[/code]
You might choose to use this to set some variables on the page for javascript to use - without having to worry about user agent detection issues and spoofing browsers (remember that this will not work for the old IE Mac browsers - only Windows):
Code: 
<script type="text/javascript">
   var isIE=isIE5=isIE6=isIE7=false;
</script>
<!--[if IE>
   <script type="text/javascript">
      isIE=true;
   </script>
<![endif]-->
<!--[if IE 7>
   <script type="text/javascript">
      isIE7=true;
   </script>
<![endif]-->
<!--[if IE 6>
   <script type="text/javascript">
      isIE6=true;
   </script>
<![endif]-->
<!--[if IE 5>
   <script type="text/javascript">
      isIE5=true;
   </script>
<![endif]-->
Be sure to check out the difference between down-level hidden (which is what I have used all the examples in this FAQ) and down-level revealed at the MSDN [link http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp]conditional comments[/link] page.

[smile]
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top