Outlook for Mac vs Outlook Classic: CSS Support Differences

Works in Outlook for Mac, 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>
• <video>
• <wbr>
• [aria-describedby]
• [aria-hidden]
• [aria-label]
• [aria-labelledby]
• [background]
• [role]
• @media device-pixel-ratio
• @media hover
• @media orientation
• @media prefers-color-scheme
• @media prefers-reduced-motion
• align-items
• backdrop-filter
• background-blend-mode
• background-clip
• background-image
• background-origin
• background-position
• background-repeat
• background-size
• border-radius
• bottom
• box-shadow
• box-sizing
• caption-side
• 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
• mask-image
• max-height
• min-height
• min-width
• mix-blend-mode
• object-fit
• object-position
• opacity
• orphans
• outline
• pseudo-class-default
• rgba
• right
• shape-margin
• shape-outside
• system-ui
• tab-size
• text-decoration-color
• text-decoration-line
• text-decoration-style
• text-emphasis
• text-emphasis-position
• text-orientation
• text-overflow
• 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
• :chaining
• :child-combinator
• :general-sibling
• :universal-selector
• display:flex
• display:grid

Works in Outlook Classic, breaks in Outlook for Mac

• <body>
• <link>
• @import

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>
• <dfn>
• <form>
• <marquee>
• <style>
• <ul>
• [align]
• [dir]
• [height]
• [target]
• [width]
• @media
• !important
• background
• border
• display
• font-size
• font-weight
• gap
• grid-template-columns
• height
• html5-semantics
• letter-spacing
• line-height
• list-style
• margin
• max-width
• overflow
• padding
• position
• pseudo-class-active
• rgb
• text-align
• text-decoration
• text-transform
• width
• word-break
• ::after
• ::before
• ::first-letter
• ::first-line
• ::placeholder
• :attribute-selector
• :checked
• :first-child
• :first-of-type
• :focus
• :focus-visible
• :focus-within
• :hover
• :last-child
• :last-of-type
• :link
• :only-child
• :only-of-type
• :target
• :visited
• display:none

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 24
• Pseudo-Classes & Selectors 22
• HTML Attributes 11
• CSS At-Rules 7
• Pseudo-Elements 5

24 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 for Mac.

• <video>
• background-image
• background-size
• border-radius
• box-shadow
• box-sizing
• float
• max-height
• min-height
• min-width
• object-fit
• opacity
• visibility
• display:flex
• display:grid
• <form>
• <style>
• @media
• gap
• max-width
• overflow
• padding
• position
• word-break

Check your own HTML against both

Questions

How different are Outlook for Mac and Outlook Classic?

They disagree on 164 of the 298 features verified in both clients, or 55%. 46 features render in both and are the safe intersection to build on.

What works in Outlook for Mac but not Outlook Classic?

103 features, including <abbr>, <acronym>, <button type="reset">, <input type="checkbox">, <input type="hidden"> and 98 more. Each needs a fallback if the send reaches both clients.

Which engines are these two clients using?

Outlook for Mac renders with WebKit; 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.