Outlook conditional CSS

Windows Outlook 2003 and above use Microsoft Word as a rendering engine, which can lead to some weird rendering issues. Outlook conditional comments allow us to add bits of HTML that are only read by the Word-based versions of Outlook.

Basic syntax

We can use MSO (Microsoft Office) tags to add HTML / CSS anywhere in an email template. This code will be ignored by other email clients. Here’s what it looks like:

<!--[if mso]>
    <table><tr><td>
        /* Outlook-specific HTML content goes here. */
    </td></tr></table>
<![endif]-->

Only Outlook will render this table.

MSO tags can also be used to add styles targeting Outlook (Outlook supports CSS in the <head>):

<!--[if mso]>
    <style>
        .example-class {
            /* Outlook-specific CSS goes here. */
        }
    </style>
<![endif]-->

It’s the same thing we used to do to target old versions of Internet Explorer, except it targets Microsoft Office.

Ghost tables

The main way we use MSO tags in our emails is to create “ghost tables” so hybrid emails don’t fall apart in Outlook. Hybrid design uses inline-block, max-width, min-width to stack table columns. Outlook doesn’t support these CSS properties, so we use MSO tags to create “ghost tables” that apply a fixed width just for Outlook.

<!--[if mso]>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="340">
<![endif]-->
    <div style="display:inline-block; width:100%; min-width:200px; max-width:340px;">
        Outlook can’t render the CSS in this DIV but other email clients can,
        so we wrap this in a ghost table that replicates the DIV’s desktop style.
        In this case, a container 340px wide.
    </div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->

Without the ghost table above, Outlook would display the <div> at 100% width. Learn how we use ghost tables to make our emails responsive.

Targeting specific Outlook versions

We usually target all versions of Outlook using <!--[if mso]>. But sometimes when testing emails in Litmus, an email looks ok in one Outlook version but is broken in another. It’s not common but it happens, and there are a few ways to target specific versions of Outlook while omitting others.

Outlook versions

Using Microsoft Office version numbers allows you to target a specific Outlook version.

Outlook version(s)	Code
All Windows Outlook Most common	`<!--[if mso]> your code <![endif]-->`
Outlook 2000	`<!--[if mso 9]> your code <![endif]-->`
Outlook 2002	`<!--[if mso 10]> your code <![endif]-->`
Outlook 2003	`<!--[if mso 11]> your code <![endif]-->`
Outlook 2007	`<!--[if mso 12]> your code <![endif]-->`
Outlook 2010	`<!--[if mso 14]> your code <![endif]-->`
Outlook 2013	`<!--[if mso 15]> your code <![endif]-->`
Outlook 2016	`<!--[if mso 16]> your code <![endif]-->`

Conditional logic

Using operators allows you to create conditional expressions for targeting multiple Outlook versions.

Note: We tend to keep our designs simple and don’t use these very often. They’re here if you need them every once in a while, but if you find yourself reaching for these often, please open an issue or ask us about it.

Code	Description	Example
`gt`	greater than	`<!--[if gt mso 14]> Everything above Outlook 2010 <![endif]-->`
`lt`	less than	`<!--[if lt mso 14]> Everything below Outlook 2010 <![endif]-->`
`gte`	greater than or equal to	`<!--[if gte mso 14]> Outlook 2010 and above <![endif]-->`
`lte`	less than or equal to	`<!--[if lte mso 14]> Outlook 2010 and below <![endif]-->`
`\|`	or	`<!--[if (mso 12)\|(mso 16)]> Outlook 2007 / 2016 only <![endif]-->`
`!`	not	`<!--[if !mso]><!--> All Outlooks will ignore this <!--<![endif]-->`