homepage Welcome to WebmasterWorld Guest from 107.20.25.215
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Microsoft Conditional Comments
.. exploring the uses of both types
SuzyUK




msg:3232702
 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.

  • uplevel browser - Internet Explorer 5 and later versions.
  • downlevel browser - Any browser except for Internet Explorer 5 and later versions.
  • downlevel-hidden conditional comment - A comment that can contain inner HTML, which is ignored in downlevel browsers. Internet Explorer 5 and later download and render the HTML content if the expression is evaluated as true.
  • downlevel-revealed conditional comment - A comment conditional comment block that can contain inner HTML, which is parsed and rendered in downlevel browsers. Internet Explorer 5 and later download and render the HTML content if the expression is evaluated as true.

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]

 

henry0




msg:3233213
 7:18 pm on Jan 26, 2007 (gmt 0)

I should not be the first one to thank you! Where is every one :)
This is great
Thanks again to make the conditions understandable
Henry

Jon_King




msg:3233223
 7:25 pm on Jan 26, 2007 (gmt 0)

I do likewise appreciate the post. Thanks SuzyUK.

cadence




msg:3233226
 7:27 pm on Jan 26, 2007 (gmt 0)

Great post! Very informative, I'm sure it will come in handy.

sabai




msg:3233253
 7:52 pm on Jan 26, 2007 (gmt 0)

I'm awaiting my Doh! moment as to when it could actually be useful?

<!--[if IE]>
<a href="http://www.mozilla.com/firefox/">Get firefox</a>
<![endif]-->

coopster




msg:3233457
 11:25 pm on Jan 26, 2007 (gmt 0)

I had to read this quite a few times myself to finally get a grip on things. Thanks SuzyUK. It may not be obvious at first so I'll throw this down for clarification -- the download-revealed ...
<![if!IE 7]> 
<h1>You are NOT using Internet Explorer 7</h1>
<![endif]>

... is always going to show up in (newer) browsers that are NOT IE version 7. However, the following ...
<![if IE 7]> 
<h1>You are using Internet Explorer 7</h1>
<![endif]>

... is not going to be a true statement. It is going to show up if you are using IE 7, but it is also going to show up in Firefox, Opera, etc. It is indeed stated above, just didn't come through as obvious to me as I thought it should have so thought it worth emphasizing for others as dense as myself ;)


Regarding comments without dashes ...

(note the dashes "--" are missing from the comments)

The MS page has a link to it's own comment section and from there to the HTML 3.2 specification at W3. But, where is the definitive documentation regarding how user agents are to handle a comment declaration followed by something that is not a comment? I went back to RFC1866 [ietf.org] that defined HTML 2.0 and found this ...


3.2.5. Comments

To include comments in an HTML document, use a comment declaration. A
comment declaration consists of `<!' followed by zero or more
comments followed by `>'. Each comment starts with `--' and includes
all text up to and including the next occurrence of `--'. In a
comment declaration, white space is allowed after each comment, but
not before the first comment. The entire comment declaration is
ignored.

NOTE - Some historical HTML implementations incorrectly consider
any `>' character to be the termination of a comment.

For example:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<HEAD>
<TITLE>HTML Comment Example</TITLE>
<!-- Id: html-sgml.sgm,v 1.5 1995/05/26 21:29:50 connolly Exp -->
<!-- another -- -- comment -->
<!>
</HEAD>
<BODY>
<p> <!- not a comment, just regular old data characters ->

Sure enough that little code snippet validates but in a modern browser that paragraph is not viewable in the browser, only in the source. BTW, the code snippet offered by SuzyUK above doesn't validate -- even after removing the extra closing </meta>. The validator does not like the illegal comments.

Interested in others observations/feedback here ...

j_h_maccann




msg:3233544
 1:02 am on Jan 27, 2007 (gmt 0)

I've found that the most convenient use of these comments is to include or not include special javascript or stylesheets for IE:


<script type="text/javascript" src="example.js"></script>
<!--[if IE]>
<script type="text/javascript" src="example-ie.js"></script>
<![ENDIF]-->

and


<link rel="stylesheet" type="text/css" href="example.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="example-ie.css">
<![ENDIF]-->

iamlost




msg:3233578
 1:34 am on Jan 27, 2007 (gmt 0)

Thanks SuzyUK and coopster. Between the two of you my lightbulb went off with a pop and a flash - may need replacement :-)

<! is the markup delimiter with > ending/closing the markup.
-- is the comment delimiter with with --> ending/closing the comment.
(This I had not properly understood until now)

Thus <!DocType...> specifies the document syntax markup.

Thus <!ENTITY % head.misc "SCRIPT¦STYLE¦META¦LINK¦OBJECT" -- repeatable head elements --> within a DocType Definition breaks down as:

<!ENTITY % head.misc "SCRIPT¦STYLE¦META¦LINK¦OBJECT"
is the actual markup and
-- repeatable head elements
serves as an inline comment describing the purpose of the markup and
-->
serves to close both the markup and the comment.

..........

Therefore given:


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

both <![if IE 7]> and <![endif]> are read by non-IE5+ (the derogatory downlevel) browsers as unknown/meaningless markup to be ignored but the <h1>You are using Internet Explorer 7</h1> is understood and displayed appropriately.

IE7 reads it as referring to itself (see following re proprietary if statement) and will display the <h1> while IE6(and lower) would not. If written <![if !IE 7]> (note the ! before the IE) then IE6(and lower) would display the <h1>, only the designated IE7 would not.

And therefore:


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

Being recognised by all but IE5+ browsers as a properly constituted comment beginning with <!-- and ending with --> it is appropriately not rendered.

The IE5+ browsers happily read the comment as containing a proprietary markup command ([if IE]) and render the <h1> as directed.

DrDoc




msg:3233622
 3:08 am on Jan 27, 2007 (gmt 0)

Excellent post, as always! ;)

One thing that we may want to add is modifiers inside the if statement itself.

if lt IE 7 = If IE and the version is less than 7, this evaluates to true
if lte IE 7 = If IE and the version is less than or equal to 7, this evaluates to true
if gt IE 7 = If IE and the version is greater than 6, this evaluates to true
if gte IE 7 = If IE and the version is greater than or equal to 6, this evaluates to true

You can also use more specific versioning:

if gt IE 5.526

SuzyUK




msg:3233769
 7:52 am on Jan 27, 2007 (gmt 0)

Thanks, great info to digest

There's also the negative (reverse logic) that both coopster and I used as examples, and is still formatted wrongly in coops post. (board formatting doesn't like putting a space before !)

It's important that there is a space between each value in the expression and the ! must have the space before it but be beside the first value.. e.g.

[if !IE 7] = if it's NOT IE7
[if !gte IE 6] = if it's NOT greater than or equal to IE6

>> validation
For those interested in validating, there was another post which had some code I didn't understand, or couldn't find reference to, but have now confirmed that it is a validating method of doing the same thing as the second version (downlevel revealed) although it looks scary and I'm not sure I would feel safe using it? I need to read iamlosts post to understand why it works ;)

[blue]<!--[if IE 7]><!-->[/blue]Your Code in Here[blue]<!--<![endif]-->[/blue]

.. I hang my head in shame for not taking out the stray </meta>, my editor has it stored .. runs off to take it out ;)

great feedback, need to digest coops, and iamlosts posts too!

Suzy

Setek




msg:3235494
 7:45 am on Jan 29, 2007 (gmt 0)

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

I'm still a bit confused on where this will actually work...

These... downlevel-revealed conditional comments, that show up in standards-compliant browsers and the browser that satisfies the condition, what happens if it's, say, IE 4? Does it display, or does it look like a normal comment?

Because if it doesn't display, I think it would have great ooh-factor in easily removing screen stylesheets from the picture, when IE for Mobile tries to render all screen stylesheets as well as the handheld ones.

Or, making a plain-text version of your website if your company policy is to not support less-than IE 6 (or something.)

Or!

<body>
<!--[if [3][/3]!IE]><!-->
All of my website goes here.
<!--<![endif]-->

<!--[if IE]>
<p><a href="http://www.mozilla.com/en-US/firefox/">Get Firefox</a></p>
<![endif]-->
</body>

HelenDev




msg:3239462
 2:55 pm on Feb 1, 2007 (gmt 0)

These... downlevel-revealed conditional comments, that show up in standards-compliant browsers and the browser that satisfies the condition, what happens if it's, say, IE 4? Does it display, or does it look like a normal comment?

I'm pretty sure conditional comments do not work in <IE5, so you can't direct stuff at these browsers, and for the purposes of this they would be 'downlevel' browsers like all the non-IE ones.

Alan




msg:3245428
 5:30 pm on Feb 7, 2007 (gmt 0)

For those interested in validating, there was another post which had some code I didn't understand, or couldn't find reference to, but have now confirmed that it is a validating method of doing the same thing as the second version (downlevel revealed) although it looks scary and I'm not sure I would feel safe using it? I need to read iamlosts post to understand why it works ;)

<!--[if IE 7]><!-->Your Code in Here<!--<![endif]-->

I tried this with Firefox 1.5.0.9 a follows:

<!--[if IE]><!--><link href="DropdownOptionCrap.css" rel="stylesheet" type="text/css" /><!--<![endif]-->

<!--[if!IE]><!--><link href="DropdownOption.css" rel="stylesheet" type="text/css" /><!--<![endif]-->


It validated, but Firefox read the supposedly IE-specific style sheet and displayed horribly. It seems that the comments themselves were commented and invisible to Firefox, although IE 6 did what was expected (crashed).

Has anyone actually found a spell that validates and works?

[edited by: Alan at 5:45 pm (utc) on Feb. 7, 2007]

Setek




msg:3245751
 10:37 pm on Feb 7, 2007 (gmt 0)

I tried this with Firefox 1.5.0.9 a follows:

<!--[if IE]><!--><link href="DropdownOptionCrap.css" rel="stylesheet" type="text/css" /><!--<![endif]-->

<!--[if!IE]><!--><link href="DropdownOption.css" rel="stylesheet" type="text/css" /><!--<![endif]-->

It validated, but Firefox read the supposedly IE-specific style sheet and displayed horribly. It seems that the comments themselves were commented and invisible to Firefox, although IE 6 did what was expected (crashed).

Has anyone actually found a spell that validates and works?

You're using the downlevel-revealed conditional comments - which means "display me in all non-IE browsers, as well as browsers below IE 5, as well as the browser that meets the condition".

I'm guessing "DropdownOptionCrap.css" is the one that you don't want standards-compliant browsers to view?

Then you'd use this one:

<!--[if IE]> ... <![endif]-->

Which is the downlevel-hidden, or "only display me for the browsers that meet the condition".

Alan




msg:3248993
 3:11 am on Feb 11, 2007 (gmt 0)

Sorry to reply so slowly, I guess the notification email vanished into a spam trap.

I'm guessing "DropdownOptionCrap.css" is the one that you don't want standards-compliant browsers to view?

Yes, self-commenting code!

Then you'd use this one:

<!--[if IE]> ... <![endif]-->

Which is the downlevel-hidden, or "only display me for the browsers that meet the condition".


Excellent, thanks, it works and validates.

Clair




msg:3269241
 6:00 pm on Mar 2, 2007 (gmt 0)

I have read this series of posts as well as much else on the web and am using the following in my HTML file. But there seems to be a problem.

<head>
<!--[if!IE ] <link href="re-style.css" rel="stylesheet" type="text/css"> <![ENDIF]-->

<!--[if gte IE 6] <link href="re-style.css" rel="stylesheet" type="text/css"> <![ENDIF]-->

<!--[if lt IE 6] <link href="re-iehack5.css" rel="stylesheet" type="text/css"> <![ENDIF]-->
</head>

When I specifically include the normal (unconditional) link for any of
the stylesheet without any others, the page displays perfectly in all the browser versions.

When I include the conditionals as they are shown above I get no style at all in *any* of the browsers -- What am I missing?

Have ended up trying this route after about 16 hours of messing up beautiful layout that worked in 6,7, and FF2.

Desperate for some help as I am against wall to provide support for IE 5.x. Grrrrrrr

Thanks.

[edited by: Clair at 6:10 pm (utc) on Mar. 2, 2007]

iamlost




msg:3269374
 7:59 pm on Mar 2, 2007 (gmt 0)

Note added red '>':


<head>
<!--[if!IE ]
> <link href="re-style.css" rel="stylesheet" type="text/css"> <![ENDIF]-->

<!--[if gte IE 6]> <link href="re-style.css" rel="stylesheet" type="text/css"> <![ENDIF]-->

<!--[if lt IE 6]> <link href="re-iehack5.css" rel="stylesheet" type="text/css"> <![ENDIF]-->
</head>


Clair




msg:3269452
 9:17 pm on Mar 2, 2007 (gmt 0)

Duh. Thank you. I have never used this operation before.

And now, just when I thought I'd found the pot of gold, I run it through all 5 browsers and guess which one doesn't work.

FF2.

All the rest are just fine. So I read all the stuff above over again
and used Alan's enclosure.

And finally -- they work.

What an ordeal -- Aren't there enough web people by now to put up a decent march on Microsoft! I'll make the banners!

Thanks again.

[edited by: Clair at 9:26 pm (utc) on Mar. 2, 2007]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved