Downlevel-revealed conditional comments, HTML Email, and Microsoft Outlook

Posted: Mar 29, 2014

Downlevel-revealed conditional comments are a technique Microsoft invented to "target" chunks of HTML to particular user agents. It's commonly used in web design to e.g. have a file full of CSS hacks for IE that is only served to Internet Explorer. Wikipedia actually has a really nice, concise overview of the syntax for conditional comments.

For my HTML Email Buttons that Rock I use conditional comments to create two entire copies of the button code: one that only Outlook sees, and one that is completely hidden from Outlook.

This is actually a little tricky. The problem is that we want to use conditional comments to hide the "regular" HTML button from Outlook, but we don't actually want it to appear commented-out to every other client that doesn't understand conditional comments.

The Wikipedia link offers two possible solutions (these refer to IE, but it's the same idea for "MSO" -- Microsoft Outlook):

<![if !IE]>
<link href="non-ie.css" rel="stylesheet">
<![endif]>

Which, it correctly notes, involves using invalid HTML tag. Browsers are supposed to just ignore tags they don't understand... but it's ugly. Your HTML won't validate and you run the risk of confusing HTML authoring or processing tools. That's why I initially opted for approach two:

<!--[if gt IE 6]><!-->
This code displays on non-IE browsers and on IE 7 or higher.
<!--<![endif]-->

But this is also pretty ugly too. I'm not sure that having <!-- in the middle of a comment is technically legal HTML, but at least all the ugliness is mostly contained to comments. Unfortunately I have recently learned that this formulation of comments confuses a popular webmail provider, which ends up stripping out all the conditional HTML. Which provider? Microsoft's Outlook.com (formerly Hotmail). Ugh.

Note: For the specific case of hiding code from MS Outlook, but showing it to everything else, there's actually another option: adding the CSS style mso-hide: all to it. Campaign Monitor explains how, but what they don't mention is that it breaks when the message is forwarded in Outlook. The "hidden from Outlook" elements are no longer hidden and you end up with two buttons visible: one that renders in Outlook and the other broken one, we meant to hide from Outlook. Not good.

So I've resorted to using the first "invalid tags" approach for my buttons. As far as I can tell it works on every major browser and email client.

Check out bottom of my Industry Dive blog post for the full Bulletproof HTML Email Button.