Outlook 365 vs Outlook Classic: CSS Support Differences
Outlook 365 renders with Outlook Web; Outlook Classic renders with Microsoft Word. The gap runs almost entirely one way: 99 features work in Outlook 365 and break in the other, against 2 in the reverse direction. Build for the stricter one and the permissive one follows.
Support data derived from caniemail.com (MIT) - last synced Nov 10, 2026 - engine data v0.18.22
One mailbox, two engines
These are the same Microsoft account read two ways. Outlook on the web and Outlook.com render in the browser; Outlook Classic for Windows renders with Word. A recipient who reads at their desk in the morning and on the web in the afternoon sees two different layouts of the same message.
This pair also previews the migration. The new Outlook for Windows is built on Outlook on the web, so the features that work here and not in Outlook Classic are, broadly, what changes for a reader when their company moves them off Classic.
What sets this pair apart from Gmail vs Outlook Classic is dark mode and layout. Outlook on the web honours @media (prefers-color-scheme) and prefers-reduced-motion, box-shadow, flexbox alignment (justify-content, align-items, flex-direction, flex-wrap) and positioning with top, left and z-index. Gmail on the web supports none of those, so here they are a real split rather than a feature nobody can use.
Building for both
- Use <!--[if mso]> comments for anything Outlook Classic needs. Only Classic reads them, so they target exactly the Word half of this pair and leave Outlook on the web alone.
- Write dark-mode styles in @media (prefers-color-scheme: dark) for Outlook on the web, and make sure the light design is still legible when Outlook Classic ignores them.
- If you use flexbox for alignment, wrap it in a table that already lays the content out, so Outlook Classic falls back to the table.
- Do not test one and assume the other. A fix for Classic does nothing in Outlook on the web, and a layout that looks right on the web can collapse in Classic.
47
work in both
the safe intersection
99
only in Outlook 365
breaks in Outlook Classic
2
only in Outlook Classic
breaks in Outlook 365
58
partial on one side
renders, with caveats
Works in Outlook 365, breaks in Outlook Classic
Each of these needs a fallback if the send reaches both.
- <abbr>
- <acronym>
- <button type="reset">
- <input type="checkbox">
- <input type="hidden">
- <input type="radio">
- <input type="reset">
- <input type="text">
- <meter>
- <rp>
- <rt>
- <ruby>
- <select>
- <textarea>
- <wbr>
- [aria-describedby]
- [aria-hidden]
- [aria-label]
- [background]
- [role]
- @media device-pixel-ratio
- @media hover
- @media orientation
- @media prefers-color-scheme
- @media prefers-reduced-motion
- align-items
- background-blend-mode
- background-clip
- background-image
- background-origin
- background-position
- background-repeat
- background-size
- border-radius
- border-spacing
- bottom
- box-shadow
- box-sizing
- caption-side
- clear
- column-count
- columns
- doctype
- empty-cells
- fit-content
- flex
- flex-basis
- flex-direction
- flex-wrap
- float
- font-kerning
- font-size-adjust
- font-stretch
- image-maps
- justify-content
- left
- list-style-position
- max-height
- min-height
- min-width
- mix-blend-mode
- object-fit
- object-position
- opacity
- orphans
- outline
- rgba
- right
- system-ui
- tab-size
- table-layout
- text-decoration-color
- text-decoration-line
- text-decoration-style
- text-emphasis
- text-orientation
- text-overflow
- text-shadow
- text-underline-position
- top
- unit-ch
- unit-initial
- unit-rem
- unit-vh
- unit-vmax
- unit-vmin
- unit-vw
- visibility
- white-space
- widows
- word-spacing
- writing-mode
- z-index
- :adjacent-sibling
- :child-combinator
- :general-sibling
- :universal-selector
- display:flex
- display:grid
Works in Outlook Classic, breaks in Outlook 365
Partial on one side
These render in both, but one client applies caveats the other does not. They fail quietly, which makes them the expensive ones.
- <base>
- <body>
- <dfn>
- <form>
- <marquee>
- <style>
- <ul>
- [dir]
- [height]
- [target]
- [width]
- @media
- !important
- background
- border
- display
- font-size
- font-weight
- gap
- height
- html5-semantics
- letter-spacing
- line-height
- list-style
- margin
- max-width
- overflow
- padding
- position
- pseudo-class-active
- pseudo-class-default
- rgb
- text-align
- text-decoration
- text-justify
- text-transform
- width
- word-break
- ::after
- ::before
- ::first-letter
- ::first-line
- ::placeholder
- :attribute-selector
- :checked
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :hover
- :last-child
- :last-of-type
- :link
- :only-child
- :only-of-type
- :target
- :visited
- display:none
A further 93 features render in neither client. Not a difference between them, but the other half of the answer to what you can actually use, so the four counts above deliberately do not sum to 299.
1 of 300 features have no confident data point for at least one of these clients, so they are excluded from every count above rather than assumed either way.
Where the divergence sits
Two pairs with the same headline number can be different problems. For these two it concentrates in CSS Properties.
- CSS Properties 91
- HTML Elements 23
- Pseudo-Classes & Selectors 20
- HTML Attributes 9
- CSS At-Rules 7
- Pseudo-Elements 5
25 of these already have a fix
Each links to a copy-paste snippet that keeps the feature working in Outlook Classic without dropping it in Outlook 365.
Check your own HTML against both
Paste your email
Questions
- If an email works in Outlook.com, will it work in Outlook for Windows?
- Only in the new Outlook for Windows, which is built on Outlook on the web. Outlook Classic uses Word and breaks far more features, so it needs its own check.
- Will this matter once Outlook Classic is retired?
- Less each year, but not yet. Organisations move on their own schedule and Classic remains supported for years, so a business audience will keep reading in both. The Outlook Classic deprecation page covers what changes and when.
- How different are Outlook 365 and Outlook Classic?
- They disagree on 159 of the 299 features verified in both clients, or 53%. 47 features render in both and are the safe intersection to build on.
- What works in Outlook 365 but not Outlook Classic?
- 99 features, including <abbr>, <acronym>, <button type="reset">, <input type="checkbox">, <input type="hidden"> and 94 more. Each needs a fallback if the send reaches both clients.
- Which engines are these two clients using?
- Outlook 365 renders with Outlook Web; Outlook Classic renders with Microsoft Word. Where two clients share an engine the divergence is usually configuration, and where they do not it is the engine itself.
- Is this measured in the real clients?
- No. These are documented support levels derived from caniemail.com (MIT-licensed), carried in @emailens/engine data version 0.18.22 and last synced Nov 10, 2026. That sync date is not a test date: caniemail's own per-feature tests run from Feb 28, 2019 to Sep 16, 2026. Anything described as a transform is applied per those documented rules rather than captured from a real client.
Test your email in Gmail, Outlook and Apple Mail
Preview rendering, catch CSS issues, and see what Outlook does to your VML. Free, no account. All 21 clients with one.
Check your email, freeNo signup · Five clients free, Outlook Classic included · All 21 with an account