Using conditional comments in HTML - css

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.

Answer 3

I have used conditional comments to detect if visitors to my site uses IE6 or lower. If that is the case, I load the IE7.js script, which overcomes some of the bugs in these older browsers. There is also a script for emulating IE8 support.

Answer 4

Some people also use comments to help outline certain areas of the page like a footer, header or main content (often in templates).
However if you are using divs and CSS (which it sounds like you are) you should be able to tell what the content is or what area of the HTML you are in by the DIV ids and CSS styles. Remember to use clear names and try not to abbreviate them just for the sake of easier typing.
If that is an issue for you then Intellisense is a wonderful thing and can help us get around stuff like that. If not then CTRL+C and CTRL+V is probably the next best thing :)

Answer 5

This is a great practice! The official documentation page of conditional comments, has many examples and combinations of conditional comments, it's worth reading it. The page also states that:
Conditional comments make it easy for developers to take advantage of the enhanced features offered by Microsoft Internet Explorer 5 and later versions, while writing pages that downgrade gracefully in less-capable browsers or display correctly in browsers other than Windows Internet Explorer. Conditional comments are the preferred means of differentiating Cascading Style Sheets (CSS) rules intended for specific versions of Internet Explorer.
Nowdays Internet Explorer is the least capable browser, so you're most likely going to use conditional comments to do the exact opposite, that is, to take advantage of the enhanced features offered by all other browsers, while writing pages that downgrade gracefully in Microsoft Internet Explorer.
You can use conditional comments to fix unsupported CSS styles, or to hide code from Internet Explorer, like this:
<!--[if !IE]>-->
<script src="IE_will_never_see_this.js" type="text/javascript" charset="utf-8" ></script>
<!--<![endif]-->