Reliable solution for conditional comments in Outlook.com HTML emails

Question

I've seen here and elsewhere that a recommended way to set up conditional comments to work with Outlook.com, but because of another known issue detailed below I'm getting blank emails. Referencing the two code examples below I wanted to see if anyone had a reliable way around this issue.

First example:

<!--[if mso]><!-- --> 
<style type="text/css">


#learn-left { width: 350px; max-width: 350px; }
#learn-right { width: 165px; max-width: 165px; }


</style>
<!--<![endif]--> 

The above code causes a blank screen in Outlook.com even though other posts here have cited that <!--[if mso]><!-- --> works with Outlook.com. I know there is any issue with having any HTML tags inside comments, but if the conditional is placed with the style tag it doesn't work either. Strangely the code below seems to work to a degree.

<!--[if mso]><!-- --> 
<style type="text/css">


#learn-left { width: 350px; max-width: 350px; }
#learn-right { width: 165px; max-width: 165px; }


</style>
<![endif]--> 

I should also note the reason I have this code is for Outlook 2000 and 2003 compatibility so I can't use media queries as an alternative solution.

Answer 1

Those sites that say you can do that are wrong. Outlook.com eats your conditional comments, and anything inside of them. Gave me quite a headache for a while.

For things where you need to use conditional comments, I found the best thing to do was to have the regular conditional comment section, but also include another table row / column or what have you with a class like class="outlookcom" (on the td) and hide it with display:none. Then, in your <style> tag you can target that hidden row with ecxoutlookcom (outlook prepends 'ecx' to all of your classed tags) and use display:block !important to show itfor outlook.com

Answer 2

I tried this, but it didn't work for me. It was showing stray comment tags onscreen.

<!--[if !gt mso 9]><!-- -->
/* css here */
<!--<![endif]-->
<!--[endif]-->

This is what worked for me. I tested it on email on acid. Seems to work perfectly.

<![if !mso]> 

<div>
This shows on all clients but not outlook 2007, 2010, 2013.
Works fine on outlook.com.
</div>

<![endif]>

---

<!--[if gte mso 9]>

<div>
This only shows on outlook 2007, 2010, 2013
</div>

<![endif]-->

I for more info, try searching for "microsoft downlevel revealed conditional comments"

Answer 3

I don't know if using CSS to hide/show is the best route to go since not all email clients will process/honor that css (I tested a version in the Outlook windows client and it didn't work). I think the reason Outlook.com is consuming the conditional branching is because the syntax people are using is slightly off. When I corrected my syntax, the code rendered correctly in both Outlook.com and Outlook the windows client. I also tried the iphone Outlook app, the iphone built in email app, and icloud (web) and the code renders correctly.

One thing to note is that if you are using razor script on IIS, be sure to wrap the if !mso in elements so IIS knows not to process it as razor script. Here is my code snippet:

<!--[if mso]>code to render in the Outlook client<![endif]-->
<text><!if !mso]>code to render in Outlook.com<![endif]></text>

Answer 4

Thanks to the hint given in the OP I just discovered a potential fix to the "blank outlook.com" problem: double end comments.

Instead of this:

<!--[if !gt mso 9]><!-- --> /* css here */ <!--<![endif]-->

try this

<!--[if !gt mso 9]><!-- --> /* css here */ <!--<![endif]--> <!--[endif]-->

It appears as though most web clients will ignore the last closing comment (it is still a valid comment block, after all), but outlook.com won't, thus you get all the email clients taking notice of the comment section and in the case of outlook.com this means no blank emails. Obviously use with caution but from my limited testing through Litmus it looks like it works just fine.