Apple Mail
Apple Mail on macOS uses the WebKit rendering engine , the same engine that powers Safari. This gives it excellent CSS support, including flexbox, grid, animations, and custom fonts. It's one of the most capable email clients for modern CSS.
The default email client on macOS. Popular among developers, designers, and creative professionals. High market share in North America and Europe.
CSS coverage profile for Apple Mail
Apple Mail renders with the WebKit engine and supports 279 of 298 tracked CSS and HTML features fully, with 13 partially supported and 6 unsupported. That places it in a broad coverage band.
Modern CSS works largely as expected. The cost of supporting this client is low. Most production templates need only minor adjustments.
279
Supported
13
Partial
6
Unsupported
298
Total
Key gotchas in Apple Mail
CSS specificity in dark mode Apple Mail's dark mode can override your explicit colors if specificity isn't high enough. Use !important on critical color declarations in your dark mode media query.
Video/audio autoplay Apple Mail supports <video> and <audio> but autoplay behavior varies by macOS version. Don't rely on media playback for critical content.
Interactive elements While Apple Mail renders forms and interactive CSS, emails are a read-only context. Interactive features won't persist or submit data.
How Apple Mail renders email
- Apple Mail macOS renders email through WebKit, so behaviour aligns closely with Safari. Modern CSS , flexbox, grid, custom properties, animations, transitions , works as expected.
- Mail's dark mode is deeply integrated with macOS's appearance setting. The client respects color-scheme meta tags, prefers-color-scheme media queries, and applies its own intelligent inversion as a fallback.
- Custom fonts load reliably from any CORS-permitted host. @font-face declarations in <style> blocks are preserved.
- Apple Mail enforces Privacy Protection (since macOS 12), which proxies image fetches, masking IP addresses and frustrating granular open-rate analytics.
Dark mode behaviour in Apple Mail
Apple Mail has the most sophisticated dark mode handling of any email client. It respects color-scheme meta tags, supports prefers-color-scheme media queries, and applies intelligent color inversion for emails that don't declare explicit dark mode styles.
QA checklist for Apple Mail
- Test rendering in both light and dark macOS appearances , Mail's automatic inversion can produce surprising results on emails that don't declare dark-mode styles.
- Verify image rendering accounts for Mail Privacy Protection , load times can shift visibly when images are proxied.
- Check that explicit color values survive the dark-mode pass; pair color and background-color on every text-bearing element.
Related clients
Renders here, dropped almost everywhere else
Safe in Apple Mail and almost nowhere else, so it needs a fallback the moment the send is not Apple Mail-only.
Where Apple Mail is weakest
- CSS Properties 11
- HTML Elements 3
- Pseudo-Classes & Selectors 3
- HTML Attributes 1
- HTML & Email Structure 1
Closest client: Apple Mail iOS
Apple Mail iOS agrees with Apple Mail on 95% of verified features. They still differ on 14: <object>, <picture>, <select>, <svg>, <video>, @media orientation, and 8 more.
Side by side
HTML Elements48
| Feature | Support |
|---|---|
| <abbr> | Supported |
| <acronym> | Supported |
| <address> | Supported |
| <audio> | Supported |
| <base> | Supported |
| <bdi> | Supported |
| <blockquote> | Supported |
| <body> | Supported |
| <button type="reset"> | Supported |
| <button type="submit"> | Supported |
| <code> | Supported |
| <del> | Supported |
| <dfn> | Supported |
| <dialog> | Supported |
| <div> | Supported |
| <form> | Supported |
| <h1> | Supported |
| <hr> | Supported |
| <img> | Supported |
| <input type="checkbox"> | Supported |
| <input type="hidden"> | Supported |
| <input type="radio"> | Supported |
| <input type="reset"> | Supported |
| <input type="submit"> | Supported |
| <input type="text"> | Supported |
| <link> | Supported |
| <marquee> | Supported |
| <meter> | Supported |
| <object> | Partial |
| <p> | Supported |
| <picture> | Partial |
| <pre> | Supported |
| <progress> | Supported |
| <rp> | Supported |
| <rt> | Supported |
| <ruby> | Supported |
| <select> | Supported |
| <small> | Supported |
| <span> | Supported |
| <strike> | Supported |
| <strong> | Supported |
| <style> | Supported |
| <svg> | Partial |
| <table> | Supported |
| <textarea> | Supported |
| <ul> | Supported |
| <video> | Supported |
| <wbr> | Supported |
HTML Attributes22
| Feature | Support |
|---|---|
| [align] | Supported |
| [aria-describedby] | Supported |
| [aria-hidden] | Supported |
| [aria-label] | Supported |
| [aria-labelledby] | Supported |
| [aria-live] | Supported |
| [background] | Supported |
| [cellpadding] | Supported |
| [cellspacing] | Supported |
| [command] | Supported |
| [dir] | Supported |
| [height] | Supported |
| [hidden] | Supported |
| [lang] | Supported |
| [loading] | Supported |
| [popover] | Supported |
| [required] | Supported |
| [role] | Supported |
| [srcset] | Supported |
| [target] | Partial |
| [valign] | Supported |
| [width] | Supported |
HTML & Email Structure8
| Feature | Support |
|---|---|
| amp4email | Unsupported |
| anchor-links | Supported |
| doctype | Supported |
| html-comments | Supported |
| html5-semantics | Supported |
| image-maps | Supported |
| mailto-links | Supported |
| meta-color-scheme | Supported |
CSS At-Rules10
| Feature | Support |
|---|---|
| @font-face | Supported |
| @import | Supported |
| @keyframes | Supported |
| @media | Supported |
| @media device-pixel-ratio | Supported |
| @media hover | Supported |
| @media orientation | Supported |
| @media prefers-color-scheme | Supported |
| @media prefers-reduced-motion | Supported |
| @supports | Supported |
Pseudo-Elements6
| Feature | Support |
|---|---|
| ::after | Supported |
| ::before | Supported |
| ::first-letter | Supported |
| ::first-line | Supported |
| ::marker | Supported |
| ::placeholder | Supported |
Pseudo-Classes & Selectors34
| Feature | Support |
|---|---|
| :adjacent-sibling | Supported |
| :attribute-selector | Supported |
| :chaining | Supported |
| :checked | Supported |
| :child-combinator | Supported |
| :class-selector | Supported |
| :descendant-combinator | Supported |
| :first-child | Supported |
| :first-of-type | Supported |
| :focus | Supported |
| :focus-visible | Supported |
| :focus-within | Supported |
| :general-sibling | Supported |
| :grouping | Supported |
| :has | Supported |
| :hover | Supported |
| :id-selector | Supported |
| :lang | Supported |
| :last-child | Supported |
| :last-of-type | Supported |
| :link | Supported |
| :not | Supported |
| :nth-child | Supported |
| :nth-last-child | Supported |
| :nth-of-type | Supported |
| :only-child | Supported |
| :only-of-type | Supported |
| :target | Unsupported |
| :type-selector | Supported |
| :universal-selector | Supported |
| :visited | Unsupported |
| pseudo-class-active | Partial |
| pseudo-class-default | Supported |
| pseudo-class-nth-last-of-type | Supported |
CSS Functions8
| Feature | Support |
|---|---|
| calc | Supported |
| clamp | Supported |
| conic-gradient | Supported |
| fit-content | Supported |
| linear-gradient | Supported |
| max | Supported |
| min | Supported |
| radial-gradient | Supported |
CSS Properties162
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.
Instant live preview · No signup required · 21 email engines
Support data last updated Sep 2, 2026 - synced from caniemail.com (MIT) via @emailens/engine.