Using Conditional Comments in HTML

About HTML conditional comments

Your first conditional comment should be:

<!--[if lte IE 6]><span>You're using IE 6 or lower.</span><![endif]-->

This is a single comment (), and will be treated as such by most browsers. Only IE will see it as anything other than a comment, and only IE <= 6 will display the span.

Compare that to what you have now:

<!--[if lte IE 6]><!--><span>You're using IE 6 or lower.</span><!--<![endif]-->

This is two comments ( and ) with some markup in between them. Since only IE understands that the comments are in any way special, other browsers will display the content but not the two comments.

You can find a very thorough guide to conditional comments on Quirksmode.

conditional comments in html

Browsers other than IE treat the conditional statements as comments because they're enclosed inside comment tags.

<!--[if IE]>
Non-IE browsers ignore this
<![endif]-->

However, when you're targeting a browser that is NOT IE you have to use 2 comments, one before and one after the code. IE will ignore the code between them, whereas other browsers will treat it as normal code. The syntax for targeting non-IE browsers is therefore:

<!--[if !IE]-->
IE ignores this
<!--[endif]-->

Your code has some problems and I corrected them. Check with IE9 and other browsers. Now its working fine except in IE10 and higher (cuz IE10 and above no longer support conditional tags)

<!DOCTYPE html><html lang="en-US"><head>    <meta charset="utf-8" />    <link href="style.css" type="text/css" rel="stylesheet" /><head/><body> <p><span class="p-style">XXXXXXXXXXXX</span></p> <p><span class="p-style-IE">YYYYYYYYYYYYY</span></p>     <!--[if IE]>    <style>    .p-style {color:red;}    .p-style-IE {display: none;}   </style>   <![endif]-->  <!--[if !IE]><!-->   <style>    .p-style {display: none;}    .p-style-IE{color:green;}   </style>    <!--<![endif]--></body></html>

HTML Email: !mso conditional trick

Conditional comments are a mecanism implemented by Microsoft in Internet Explorer (up until IE9) and in Word’s rendering engine (used by Outlook 2007 and above). The idea is to hide content for the rendering engine through a regular HTML comment so that no other rendering engines will see it. I’m going to detail the syntax that I use and then I'll get back to the difference between the syntaxes you observed.

Here’s the syntax that I use to hide content from Outlook:

<!--[if !mso]><!-->
<style>
    .innerTable{
        border: 1px solid black;
    }
</style>
<!--<![endif]-->

Let’s break this step by step and see how Outlook and other rendering engines will interpret this.

<!--: This is the opening of an HTML comment. Every rendering engine is expecting what’s next to be part of the comment and won’t display it on screen.
[if !mso]>: This is the condition for rendering engines that support conditional comments (IE, Outlook). Other rendering engines and browsers will just see this as plain text, part of the comment. But IE and Outlook will evaluate the condition. The condition here is !mso (not mso). Outlook will see this and think “Well, I am mso! I’d rather ignore everything that follows until I find the [endif] statement.”
<!-->: This closes the HTML comment opened on step 1. Outlook ignores this as it’s part of the !mso content. But other rendering engines will understand this and think “Ok, this comment is over. Better get ready to execute and display what’s next.”
<style>…</style>: This is our HTML content. It’s hidden for Outlook because it’s still part of the !mso condition. And other rendering engines will render this as normal.
<!--: This is the opening of an HTML comment (again).
<![endif]: This is the closing condition statement for rendering engines that support conditional comments (IE, Outlook). Outlook will evaluate this and think “Ok, condition time is over. Back to work then.”. Other rendering engines and browsers will just see this as plain text, part of the comment.
-->: This is the closing of the HTML comment opened on step 5. This is evaluted by all rendering engines.

Now you might be thinking: “Why did we use ?” Well this is a nice trick at play to take in account for other rendering engines that do support conditional comments (like Internet Explorer). IE will see the !mso condition and think “Well, I'm certainly no mso. Let’s see what’s next for me!” If we were to just have a closing HTML comment (-->), IE would freak out as it’d see a closing without an opening. So that’s the trick:  or  (as you noticed in your Version 2 and 3).

As for the difference between the other versions you posted, Version 1 and 2 only use <![endif]--> as a closing statement. This is correct for Outlook, but incorrect for any other rendering engines. Luckily, they render this as an HTML comment anyway. So it ends up working correctly, but it is not valid in a standard way.

So my recommendation is to always use the following syntax to hide content from The Outlooks:

<!--[if !mso]><!-->
…
<!--<![endif]-->

And if you need to show content only on The Outlooks:

<!--[if mso]>
<![endif]-->

Other ressources that might be useful:

Different conditional comments examples
Microsoft documentation about conditional comments
A blog post I wrote about Outlook rendering engine

Conditional comments not working for browsers other than Internet Explorer

I will answer myself because I found the problem, which wasn't anything related with IE selector tag neither rgba attribute in itselves (as somebody said before: IE 10 supports this last one), but with the alpha gradient applied. For some reasson, the alpha value is not rendered very well in IE and it results in a completely different style. Changin the 0 (alpha value) in the font color and playing a little with those color values is possible to get a very similar result in IE and other browsers.
So, thank you so much for everyone who has been trying to help me. I hope this helps another person.
:)

How to remove all conditional HTML comments?

Here are two important facts about (f)lex regular expressions. (See the flex manual for complete documentation of Flex patterns. The section is not very long.)

In (f)lex, the . wildcard matches anything except a newline character. In other words, it is equivalent to [^\n]. So "<!".* will only match to the end of the line. You could fix that by using (.|\n) instead, but see below.
(F)lex does not provide non-greedy repetition (*?). All repetitions extend to the longest possible match. (.*?)--> will therefore match up to the last --> on the line, and (.|\n)*?--> would match up to the last --> in the file.

It is possible to write a regular expression which does what you want, although it's a bit messy:

<!--([^-]|-[^-]|--+[^->])*--+>

should work, as long as the input text does not end with an unterminated comment. (The quotes in your pattern are unnecessary, since none of the quoted characters has any special meaning to (f)lex, but they don't hurt. I left them out because I don't think they contribute to make the pattern less unreadable.)

The repeated sequence matches any of:

A character other then -; or
A - followed by something other than another -; or
Two or more - followed by something other than >.

The last alternative in the repetition might require some explanation. The underlying problem is to avoid problems with inputs like

<!-- Comment with two many dashes --->

If we'd just written the tempting --[^>] as the third alternative, ---> would not be recognised as terminating the pattern, since --- would match --[^>] (a dash is not a right angle bracket) and > would then match [^-], and the scan would continue. Adding the + to match a longer sequence of dashes is not enough, because, like many regex engines, (f)lex is looking for the longest overall match, not the longest submatch in each set of alternatives. So we need to write --+[^->], which cannot match ---.

If that was not clear -- and I can see why it wouldn't be --, you could instead use a start condition to write a much simpler set of patterns:

%x COMMENT
%%
"<!--"    { BEGIN(COMMENT); }
<COMMENT>{
   "-->"   { BEGIN(INITIAL); }
   [^-]+   ;
   .|\n    ;
}

The second <COMMENT> rule is really just an efficiency hack; it avoids triggering a no-op action on every character. With the second rule in place, the last rule really can only match a single -, so it could have been written that way. But writing it in full allows you to remove the second rule and demonstrate to yourself that it works without it.

The key insight for matching the comment in pieces like this is that (f)lex always chooses the longest match, which is in some ways similar to the goal of non-greedy matches. While inside the <COMMENT> start condition, - will only match the single character fallback rule if it cannot be part of the match of -->, which is longer.

Mailchimp affects my Outlook-specific conditional comments in HTML

I feel your pain, I've had the same issue for templates I was making for a client. I wanted to make the icons retina proof and let the client upload any image size he'd like. Unfortunately after many many hours debugging en searching the web, I read the following on a MailChimp post:

Outlook doesn’t recognize the HTML that constrains images. This means
that if you use HTML to resize an image uploaded to a campaign or
template, it may display at the original size in Outlook. Be sure to
resize your images before you upload them to MailChimp, or use our
built-in image editor.

source: MailChimp Knowledge Base

I didn't really believe that this could actually be true so I kept trying to constrain the images. I've put fixed width on the img, td, tr, table.. nothing helped.

Sadly I can't really explain what happens, hopefully the link to the MC article gives you a better view on it.
But my best answer is to set a max-width & width to your img and td anyway. And tell your client to resize the images to the allowed size. Setting a max-width and width will also display the #px when hovering over the editable image in your MailChimp editor. I also found out that when you do upload a bigger size, MailChimp throws a lil' warning.

If it may help in any way; see my code below that I used in my templates to make it fluid.

<table mc:repeatable mc:variant="Item with image top and CTA" width="650" cellpadding="0" cellspacing="0" border="0" align="center" class="full-table" style="width:650px;">
<tr>
  <td style="padding:30px 20px 40px 20px;" bgcolor="#FFFFFF">
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td style="padding-bottom:15px;max-width:610px;">
          <img src="/images/img.jpg" alt="x" style="width:100%; max-width:610px;" width="610" mc:edit="article_image">
        </td>
      </tr>
    </tr>
  </table>
</td>