Hiding content with mso-hide:all; to be more friendly with Outlook.com

readme.md

The mso-hide:all; workaround for conditional content hiding with Outlook (Desktop client)

Outlook.com strips all content in ANY conditional comment placed in an email template. Depending on how your logic is constructed, this can be a problem, as it will potentially remove content that you intend to be visible.

There are various articles that suggest clever modification of conditional comments resolve the problem.

THIS IS NO LONGER TRUE!

Conditional comments will be stripped regardless.

hiding-content-outlook-webmail.html

<!--
    Example 1: Using IF ELSE logic
    Works with Outlook (Desktop)?: Yes
    Works with Outlook.com?: No
    
    When using IF ELSE logic, Outlook.com will remove content in both conditionals, which is problematic.
-->

<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td>Special Outlook (Desktop) content</td>
    </tr>
</table>
<![endif]-->

<!--[if !mso]><!-- -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td>All other clients</td>
    </tr>
</table>
<!--<![endif]-->



<!-- 
    Example 2: Using one IF statement and mso-hide:all;
    Works with Outlook (Desktop)?: YES
    Works with Outlook.com?: YES
    
    This example only uses IF logic. This will work OK with Outlook.com because the conditional is targeting the Outlook desktop 
    client only. Outlook.com will still strip the content but it doesn't matter in this case because the conditional isn't targetting 
    that client.
    
    However because the MSO conditional comment logic has been removed in order to hide the second table in Outlook (Desktop) 
    the special MSO property of mso-hide:all; must be used in replacement of !mso
-->

<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td>Special Outlook (Desktop) content</td>
    </tr>
</table>
<![endif]-->

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="mso-hide:all;">
    <tr>
        <td>All other clients</td>
    </tr>
</table>

<!-- Note when hiding nested table content you will need to apply mso-hide:all; to the containing and nested tables within -->