tags:

views:

346

answers:

6

Hello all,

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.

+5  A: 

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.

rmeador
A: 

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 :)

John_
Thanks for the input John. I do already use comments throughout my code to distinguish certain sections. However with this question i am focusing more on the use of conditional comments to direct certain things to IE. Sorry if i didn't make that clear in the original question.
Ronnie
Ah yes the word "conditional" does give it away doesn't it :)
John_
+2  A: 

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.

Morten Christiansen
+4  A: 

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.

George Stocker
Thanks Gortok. If i where to add an <!--[if IE]> (link style IE) and then follow that with the call to my standard stylesheet wouldn't my IE style be overwritten with my main styles?
Ronnie
Only if you place your normal styles behind it, if you place the normal styles before the conditional then the styles in the conditional will overwrite them.
Pim Jager
Thank You Pim, understood.
Ronnie
What Pim said. I have my normal stylesheet listed in a separate file before the conditional comments.
George Stocker
A: 

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]-->
facildelembrar
Thank you, that should be helpful.
Ronnie
A: 

i have seen a lot of conditions regarding IE but how if i want to do something like this

html here

i just want to hide some code from IE6 and IE7 and not from IE8, Firefox and opera......how should i do it.........too much problems i am facing

Muhammad Ahsan