Outlook conditional CSS
Windows Outlook 2016, 2019 and the perpetual-licence 2021 all use the Microsoft Word engine to render HTML. This engine ignores modern layout properties such as flexbox, max-width, shorthand margins and many media-query techniques. As a result, code that appears correct in WebKit or Blink clients may misalign or disappear in Outlook.
MSO conditional comments
Content wrapped in:
<!--[if mso]> … <![endif]-->is only parsed by Word-based Outlook. Other clients ignore this block. This lets you add fallback tables (“ghost tables”), VML buttons or Outlook-specific <style> rules without affecting other clients. You can narrow the target with a version number—<!--[if mso 16]> targets 2016/2019/2021 specifically—but <!--[if mso]> generally covers all Word-based desktop builds.
How the NSW Email Framework helps
Global Outlook reset: The layouts/main.html template injects a small MSO block in the
<head>that sets DPI to 96, swaps in the Segoe UI font stack and corrects list padding. This is included in every compiled template.Component-level fallbacks: Components like the Button use Maizzle's
<outlook>helper, which compiles to conditional markup (such as<v:roundrect>for rounded buttons and spacing shims). Inline MSO-specific attributes like mso-line-height-rule: exactly; nudge Word rendering.No separate _outlook.scss file: All Outlook-only rules are placed in conditional blocks or as inline mso-* attributes—there's no additional SCSS file to import.
When you need to extend
For features Word ignores (such as background images, min-width, or CSS animation), include extra selectors or VML snippets within the existing MSO conditional block. Use table-based layouts and retest in Litmus or a virtual machine after structural changes.
Pre-merge checklist
Open Litmus or VM previews for Outlook 2016, 2019 and 2021 after any layout or background-image change.
Confirm that background images include a VML or solid-colour fallback in the MSO block.
Ensure interactive elements degrade gracefully—Word removes
<input>tags and many ARIA attributes.
Sources
Litmus, “A Guide to Rendering Differences in Microsoft Outlook Clients,” 27 Oct 2023.
Stack Overflow Design, “Outlook conditional CSS,” accessed May 2025.
Email on Acid, “Conditional CSS for Email: What Developers Need to Know,” 11 Jan 2023.
Microsoft Q&A, “PixelsPerInch 96” in an MSO block, 5 Sept 2024.