Wouldn’t it be nice to be able to address IE in different versions with just a prefix in css, without hacks and multiple stylesheets.

Example:
p {color: blue}
.ie6 p {color: red}
.ie7 p {color: green}

This is actualy possible using conditional comments!

Example:

<html>
<head>
<style type="text/css">
p {color: blue}
.ie6 p {color: red}
.ie7 p {color: green; font-weight: bold}
</style>
</head>
<body>

<!--[if lt IE 6]>
<script type="text/javascript">
alert('The version of IE is less than 6');
</script>
<div class="ie6">
<![endif]-->

<!--[if IE 6]>
<div class="ie6">
<![endif]-->

<!--[if gte IE 7]>
<div class="ie7">
<![endif]-->

<p>
If IE6, then this text is red.<br>
if IE7, then this text is green.<br>
if any other, then this text is blue.
</p>
<!--[if IE]></div><![endif]-->
</body>
</html>

Basically I’m testing for 3 different browser situations

  1. Pre IE6: a warning will be displayed, and a div with class=”ie6″ will be output
  2. IE6: div with class=”ie6″ will be output
  3. IE7: div with class=”ie7″ will be output

The closing </div> tag right before the </body> tag will be displayed for all versions of IE.

Posted Friday, February 13th, 2009 at 1:08 pm
Filed Under Category: Coding, CSS
You can leave a response, or trackback from your own site.

0

Leave a Reply