Update Aug 2017: This is no longer the case. Thank you Robby Morgan.

Lets start with some terminology: Outlook refers to Outlook 2007/2010/2013, Microsoft’s HTML challenged desktop email client (and a perennial pain in the a** for email designers) and Outlook.com refers to Microsoft’s popular and HTML-responsible Web-based email client which began life as Hotmail.

Outlook (since 2007) has always been terrible at rendering anything more than rudimentary HTML. However email designers have found clever ways to quarantine advanced email content from Outlook by hiding them using Outlook’s proprietary conditional comments. This has the effect of hiding (or displaying) a piece of content ONLY for Outlook. For a long time this kept everyone a bit miffed but otherwise content.

However I recently noticed that Outlook.com is stripping content within ALL conditional comments! Content that only used to be hidden only in Outlook is now also hidden in Outlook.com.

Effects of Outlook.com’s change

See the following conditional comments. In the past the conditional comments would clearly separate Outlook from the rest of the email clients. With Block A visible to clients such as iPhone, Android, Gmail, Yahoo! Mail, AOL and Outlook.com, and Block B, only visible to Outlook.

<!--[if !mso 9]><!-->
Block A: Content hidden ONLY in Outlook 2007/10/13 (displayed in other clients)
<!--<![endif]-->

<!--[if gte mso 9]>
Block B: Content displayed ONLY in Outlook 2007/10/13 (hidden in other clients)
<![endif]-->

With the recent changes, Outlook.com strips BOTH Block A & B, which may (or may not) have an unintended effect in your design: Content within Block A that is visible on non-Outlook clients will remain hidden in Outlook.com.

Therefore with this discovery I no longer advocate using conditional comments for hiding content in Outlook alone. (I saw this post that mentioned this issue a year back but for some reason I was pretty sure all conditional comments were not removed until recently).

Use mso-hide:all CSS to hide content in Outlook.

So how do you hide content only in Outlook? Jeremy Peter posted a simpler solution in Litmus’ discussion board using the mso-hide:all CSS style.

Caveat: One requirement of this technique is that if the content contains nested tables, this style needs to be applied to each of the tables as well.

<div style=“mso-hide:all”>
  Content hidden ONLY in Outlook
</div>

See this updated article on how to hide mobile content in non-mobile email clients.