Page is a not externally linkable
- Code, Content, and Presentation
-- CSS
---- Microsoft Conditional Comments

SuzyUK - 12:03 pm on Jan 26, 2007 (gmt 0)


What's A Conditional Comment?

Microsofts Conditional Comments [msdn.microsoft.com] are essentially a proprietary form of browser sniffing, the idea is you can can use them to detect, not only IF IE is being used but also which version of IE is being used and apply code (HTML, or CSS) as required.

Why would you want to do that?

Well we all know and love IE, and know that it does have its unique way of doing things, because of this it can be incredibly useful to be able to direct code only at a specific version of IE, e.g. their Box Model, which might only require different CSS values for version 5.5 and below, or applying a <script> to get the :hover pseudo element to work for version IE6 and below.. anyway the reasons are endless, and though you may never need to use it can be a useful way to do things that require differences in the HTML too.

Did you know that are two different types of Conditional Comment?

I did but I never fully bothered to understand the differences between the 2 until I had to debug some code recently. Typical eh.. not bothered until I have to

Working Out Microsoft's explanation on that linked page is not easy, it's sooo IE5 centric so I have some examples, and hope that it will help others and I sincerely welcome feedback as I'm still looking for the Doh! moment on the second one especially.

Microsofts terminology.

The two differing types of comment I'm referring to in this post are the downlevel-hidden and the downlevel-revealed comments they do do different things.

I do so want to change the terminology description of "downlevel" and "uplevel" - though ;)

  • uplevel browser - Internet Explorer 5 and later versions.
    uplevel browser = IE
  • downlevel browser - Any Non IE Browser except for Internet Explorer 5 and later versions.
    downlevel browser = Non IE

Interesting when read like that no ;)

Anyway read like that it makes the 2 comment types easier to understand for me anyway

Conditional Comments are not CSS Comments they are HTML comments!

So far since the words "Conditional Comment" became an accepted part of many CSS discussions, it's usually the downlevel-hidden one we see most e.g.
<!--[if [i]expression[/i]]> Your code <![endif]-->

The biggest assumption is that because they are Microsoft proprietary they are ignored by other browers, admittedly this is the easiest way to explain them perhaps, however that's not strictly true - it's the type of comment that determines that.

The Different Types with examples

1. A downlevel-hidden comment is a comment which is hidden from NON-IE Browsers and applied to the IE browser targetted in the expression part of the block

example:

<!--[if IE]>
<h1>You are using Internet Explorer</h1>
<![endif]-->

That HTML code is hidden from all NON-IE browsers by virtue of what it is, a "downlevel-hidden comment", and then is subsequently revealed only to versions of IE that equate to true as per the expression inside the code block (which in my example is them all)

This type of comment suffices for most instances as usually you do just want to target IE with an overriding bit of code, and when using it with CSS you also use the cascade itself to override styles which were applied in a previous stylesheet.

However the second type (my grey area) could also be useful.. the second type is
downlevel-revealed
<![if expression]> your code here <![endif]>
(note the dashes "--" are missing from the comments)

2. A downlevel-revealed comment is a comment which is revealed to NON-IE Browsers and is also revealed to the IE browsers which equate to true in the expression part of the block

example:

<![if !IE 7]>
<h1>You are NOT using Internet Explorer 7</h1>
<![endif]>

the HTML code above will be applied to every browser except IE7, this example is not the best, because there's perhaps not much need to do that.

What it does mean is that you can omit or include only specific IE versions along with other browsers, whereas the first type of comment is for IE only.

for CSS this might be done something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /></meta>
<title>Conditional Test</title>
<style type="text/css" media="screen">
html, body {margin: 0; padding: 0;}
h1, h2 {text-align: center; margin: 0 50px;}
</style>
<![if IE 7]>
<style type="text/css" media="screen">
h1 {color: #fff; background: #000;}
h1:hover {background: #fff; color: #000;}
</style>
<![endif]>
</head>
<body>
<h1>If you're using IE7, or any other browser this heading will have a hover effect</h1>
<h2>but, if using IE6 or below the header above degrades to default black on white</h2>
</body>
</html>

again that perhaps not the best example, like I said I'm awaiting my Doh! moment as to when it could actually be useful?

but the <![if IE 7]> comment around the <style> element means that that particular block of code is applied to all NON-IE browsers AND IE7, it's different from the first example which used the !negative inside the block to omit IE7.

If you've ever wanted to apply some HTML, e.g. an extra inline HTML element, <style>, or <script> to all non-ie browsers and also include a specific IE version, or omit a specific IE version then the downlevel revealed would be the comment to use.

Hope that above is of some use, and I look forward to better explanations and/or examples of when to use one over the other

Thanks
Suzy

Edit: sorry the board formatting removed the spaces before the ! in the examples - that spacing is important in CC's. - should be fixed now

Later edit to correct updated Microsoft link

[edited by: SuzyUK at 12:04 pm (utc) on Aug. 14, 2009]

Thread source:: http://www.webmasterworld.com/css/3232700.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com