MSO (Microsoft Office) conditional comments are your secret weapon for taming Outlook's Word-based rendering engine. They let you serve Outlook-specific code that other email clients ignore.
What Are MSO Conditionals?
MSO conditional comments are HTML comments with special syntax that only Microsoft Office applications (including Outlook) recognize. They're invisible to other email clients.
<!--[if mso]>
This code ONLY renders in Outlook
<![endif]-->
<!--[if !mso]><!-->
This code renders EVERYWHERE EXCEPT Outlook
<!--<![endif]-->Syntax Reference
Basic Outlook Targeting
<!-- All Outlook versions using Word rendering -->
<!--[if mso]>
Outlook only
<![endif]-->
<!-- Everything EXCEPT Outlook -->
<!--[if !mso]><!-->
Not Outlook
<!--<![endif]-->Version Targeting
| Condition | Target |
|---|---|
[if mso 12] |
Outlook 2007 only |
[if mso 14] |
Outlook 2010 only |
[if mso 15] |
Outlook 2013 only |
[if mso 16] |
Outlook 2016, 2019, 365 |
[if gte mso 9] |
Outlook 2000+ (all versions) |
[if gte mso 12] |
Outlook 2007+ |
[if lt mso 16] |
Before Outlook 2016 |
Comparison Operators
gte- Greater than or equalgt- Greater thanlte- Less than or equallt- Less than!- Not
Common Use Cases
1. Fixed-Width Container for Outlook
Outlook ignores max-width on divs. Use a table wrapper:
<!--[if mso]>
<table role="presentation" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td>
<![endif]-->
<div style="max-width: 600px; margin: 0 auto;">
Your responsive content here
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->2. VML Background Images
CSS background images don't work in Outlook. Use VML:
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"
style="width:600px;height:300px;">
<v:fill type="frame" src="https://example.com/background.jpg" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div style="background-image: url('https://example.com/background.jpg');
width: 600px; height: 300px;">
Content over background
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->3. Bulletproof Buttons
Create buttons that look good in Outlook:
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:w="urn:schemas-microsoft-com:office:word"
href="https://example.com"
style="height:44px;v-text-anchor:middle;width:200px;"
arcsize="10%"
strokecolor="#7C3AED"
fillcolor="#7C3AED">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;">
Click Here
</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<a href="https://example.com" style="
display: inline-block;
padding: 12px 24px;
background-color: #7C3AED;
color: #ffffff;
text-decoration: none;
border-radius: 6px;
font-size: 16px;
">Click Here</a>
<!--<![endif]-->4. DPI Scaling Fix
Prevent images from scaling incorrectly on high-DPI displays:
<head>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>5. Multi-Column Layout
Create responsive columns that stack properly:
<!--[if mso]>
<table role="presentation" width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div style="display: inline-block; width: 100%; max-width: 300px; vertical-align: top;">
Column 1 content
</div>
<!--[if mso]>
</td>
<td width="50%" valign="top">
<![endif]-->
<div style="display: inline-block; width: 100%; max-width: 300px; vertical-align: top;">
Column 2 content
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->Important Namespaces
For VML to work, add these namespaces to your HTML tag:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">Common Mistakes
1. Forgetting to Close Conditionals
<!-- Wrong - missing closing -->
<!--[if mso]>
<table>
<!-- Correct -->
<!--[if mso]>
<table>
<![endif]-->2. Incorrect "Not Outlook" Syntax
<!-- Wrong -->
<!--[if !mso]>
Content
<![endif]-->
<!-- Correct -->
<!--[if !mso]><!-->
Content
<!--<![endif]-->3. Missing VML Namespaces
VML shapes won't render without proper namespaces in your HTML tag.
Testing MSO Conditionals
Mailglass Lite validates your MSO conditionals and warns about:
- Missing conditionals where they might be needed
- Syntax errors in conditional comments
- Missing VML namespaces
- Unclosed conditional blocks
Quick Reference Card
<!-- All Outlook -->
<!--[if mso]> ... <![endif]-->
<!-- Not Outlook -->
<!--[if !mso]><!--> ... <!--<![endif]-->
<!-- Outlook 2007+ -->
<!--[if gte mso 12]> ... <![endif]-->
<!-- Outlook 2016+ -->
<!--[if gte mso 16]> ... <![endif]-->
<!-- Specific version -->
<!--[if mso 15]> ... <![endif]-->Key Takeaways
- MSO conditionals target Outlook specifically
- Use them for fixed-width containers, VML backgrounds, and buttons
- Add proper namespaces for VML to work
- Double-check the "not Outlook" syntax
- Always close your conditional blocks
Need help with MSO conditionals? Mailglass Lite validates and auto-fixes common Outlook issues for free.