New Outlook vs Classic Outlook: What Changes for HTML Email

Two different apps called Outlook

Classic Outlook is the Windows desktop app that renders HTML with Microsoft Word. Microsoft documented the switch with Outlook 2007, which "uses the HTML parsing and rendering engine from Microsoft Office Word 2007 to display HTML message bodies". That is why it ignores so much CSS, and why email developers write mso- properties and VML for it.

The new Outlook for Windows is a different application. Microsoft describes it as a native app based on WebView2, where "the experience is provided by Outlook on the web", with a small Windows component for notifications and local files. For your HTML, that makes it a web client, in the same family as Outlook on the web, not a newer version of the Word renderer.

Both will be in your audience for years

Microsoft describes the move in three stages: opt-in, opt-out (the new Outlook on by default, switching back still allowed) and cutover. It also says existing installations of classic Outlook stay supported for years after the switch. The dates and what each stage means for templates are on the Outlook Classic deprecation page.

Conditional comments only reach classic Outlook

<!--[if mso]> is a Word feature. Classic Outlook reads what is inside; every web client, the new Outlook included, sees an HTML comment and skips it. Our engine scopes its MSO conditional-comment rule to Outlook Classic alone for the same reason.

<!--[if mso]>
  Classic Outlook (Word) reads this: a VML button
  with rounded corners. The new Outlook sees a comment.
<![endif]-->
<!--[if !mso]><!-->
  Every other client reads this, the new Outlook
  included: a plain <a> styled with border-radius.
<!--<![endif]-->

So a VML button, a VML background or a ghost table shows only in classic Outlook. In the new Outlook, the reader gets whatever you put in the <!--[if !mso]> branch or outside the conditionals. If that version was never tested, because "Outlook" meant the Word view, it is the one that breaks. How the conditionals and mso- properties are written is in coding email templates for Outlook.

What CSS each one supports

Across the features our engine tracks: 51 of 300 features work in Outlook Classic · 26 partial · 222 not supported · 1 untested. 168 of 300 features work in Outlook (New) · 34 partial · 98 not supported.

In practice: border-radius works in Outlook (New). border-radius is not supported in Outlook Classic. A rounded button that relies on CSS is rounded in one Outlook and square in the other. @media is partly supported in Outlook (New). @media is not supported in Outlook Classic.

Not everything moves. Not fully supported in either: @media, linear-gradient and @font-face. Web fonts are one of them; the stacks that hold up in both are in the email fonts guide.

One caveat on the data. caniemail, the public dataset behind these cells, has no tests of the new Outlook for Windows itself. Our engine fills its column from caniemail's Outlook.com results, which matches Microsoft's description of the app as Outlook on the web in a desktop frame, but it is an inference, not a measurement of the app. The property-by-property story for the Word side is in the Outlook CSS guide.

Build for both during the migration

• Keep the MSO fallbacks. Classic Outlook is still supported and still installed; deleting the VML and the conditionals only takes the design away from those readers. The fixes for rounded corners, gradients and images are in the Outlook fallbacks post.
• Treat the non-MSO branch as a real design. It is what the new Outlook shows, alongside Gmail and Apple Mail. Modern CSS such as border-radius reaches the new Outlook there.
• Keep table layout. Tables are the structure both renderers draw the same way; a flex or grid layout holds in one and falls apart in the other.
• Test both as separate clients. Emailens treats Outlook Classic and Outlook (New) as two clients. Paste the email into the CSS compatibility checker to check it against both, and see how to test HTML emails for the full pre-send check.

Dark mode differs too

@media prefers-color-scheme is not supported in Outlook Classic. @media prefers-color-scheme works in Outlook (New). So a dark palette you wrote yourself can appear in the new Outlook and never in the classic one. How each client changes colours, and how to keep a logo readable through it, is in the dark mode email guide.

Signatures in the new Outlook

In the new Outlook, signatures live under Settings > Accounts > Signatures, where you pick the account, select New signature, and choose whether it goes on new messages and on replies and forwards. In classic Outlook they are under File > Options > Mail > Signatures.

The common complaint is that a signature built in classic Outlook is missing after the switch. Microsoft's import article lists signatures among the settings the new Outlook imports when you first start it, with one condition that is easy to miss: the import only succeeds if Store my Outlook settings in the cloud is checked under General in classic Outlook's options, which needs a restart. If you skipped the import, or the box was off, check it, restart classic Outlook, then in the new Outlook go to Settings > Accounts > Your accounts, select Manage next to your primary account and choose Get Started. Microsoft says imported settings are also applied to Outlook on the web.

Microsoft's signature article adds that signatures listed under Signatures on this device are stored locally on the device where they were created and may not be available on another one. To use the same signature across Outlook apps, it says to create and manage it through your Microsoft account where that is available.

A signature is HTML like the rest of the message, so the split above applies to it too: your recipients' Outlook renders it, not yours. A signature with rounded images or a background image can look right when you write it in the new Outlook and lose both for a recipient on classic Outlook. Keep signature HTML to tables, plain images with width and height set, and text.