MSO Conditionals & Outlook Hacks

Email Coding 101, Module 4 of 5. The code email developers use to control what Outlook sees, and what it does not.

What Are MSO Conditionals?

MSO (Microsoft Office) conditionals are special HTML comments that only Outlook on Windows understands. Every other email client treats them as ordinary comments and ignores them. That lets developers show code only to Outlook, or hide code from Outlook, without affecting any other client.

<!--[if mso]>
<table width="600"><tr><td>
<![endif]-->
  <div style="max-width: 600px;">Content works everywhere</div>
<!--[if mso]>
</td></tr></table>
<![endif]-->

Outlook on Windows sees the if mso condition and runs the code inside. Other clients see an HTML comment, which is invisible. Here, Outlook gets a 600px table wrapper while everyone else gets a max-width div.

The display:none Problem

On the web, display: none hides an element. Outlook's Word rendering engine does not understand it, so the element stays visible. If you try to hide a mobile-only image with display: none, Apple Mail and Gmail hide it, but Outlook shows it.

The Fix: Hide Content from Outlook

Wrap the mobile-only content in a "not MSO" conditional:

  1. The opening <!--[if !mso]><!--> tells Outlook "if not MSO", so it skips everything inside. Other clients ignore the comment tags.
  2. The content between the tags, such as a mobile row, renders normally in non-Outlook clients, where CSS hides it until a media query reveals it on mobile.
  3. The closing <!--<![endif]--> ends the block, and Outlook resumes reading the email.

The result: Apple Mail and Gmail receive both the desktop and mobile rows, while Outlook receives the desktop row only.

The CSS That Powers It

A style block in the head hides the mobile row by default (zero width and height, overflow hidden, display none). Inside a media query for screens 600px wide or smaller, it reveals the mobile row and hides the desktop row, including the Outlook-specific property mso-hide: all.

What is a media query?

A media query is a CSS rule that applies only when the screen matches a condition, like an if-statement for screen size. In @media only screen and (max-width: 600px), @media starts the conditional rule, only screen limits it to screens, and max-width: 600px applies it only at 600 pixels wide or less. Desktops ignore those rules; phones apply them.

Two Approaches to MSO Hiding

The if !mso conditional comment wraps content that should be hidden from Outlook. The CSS property mso-hide: all on a table does the same thing with CSS. The conditional comment approach is generally more reliable.

Next: The Div-Based Future | Back to Email Coding 101