Using conditional comments in HTML

Question

I am relatively new to web development and learning all the time. I have recently come across 'Conditional Comments' when viewing source code for different websites. I think i now understand what they do but am unsure as to when to use them.

I have seen them mainly used for implementing different stylesheets when it comes to IE and would like to know if this is good practice?

In which case if the answer is 'Yes'. Then when developing a site is it 'common place' to use two separate stylesheets to fix bugs, for example create one stylesheet for IE and one for Firefox, Opera etc?

Thanks in advance.

Answer 1

Conditional comments are only supported by IE, as far as I know, and they gracefully downgrade in browsers that don't support them (since they look like a normal comment). The general consensus is that it's OK to use a non-standard browser feature if you're using it to combat another non-standard browser "feature" (i.e. the crappy support for CSS in IE). So you'll find that it's a very common solution for tweaking CSS.

Answer 2

The nature of Internet Explorer (version 6 especially) makes it so that some stylesheets work well with IE, and some don't. For the purposes of those that don't, you can use conditional comments to have CSS code that only displays for IE. I have to use it because of how Internet Explorer (mis)handles CSS dropdown menus.

To make the website I'm working on properly render the hover feature of the dropdown menu, I have to implement the crosshover.htc file. Here's the code I have to use:

     <!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(http://www.stannscatholicschool.com/csshover.htc);
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}

#menu a, #menu h2 {
font: 100% verdana, tahoma, helvetica, arial, sans-serif;
}

</style>
<![endif]-->

If I don't do that, the dropdown menu splits apart and can't be navigated in Internet Explorer 6.