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 234 of 251 tracked CSS and HTML features fully, with 12 partially supported and 5 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.
234
Supported
12
Partial
5
Unsupported
251
Total
Key gotchas in Apple Mail
CSS specificity in dark modeApple 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 autoplayApple Mail supports <video> and <audio> but autoplay behavior varies by macOS version. Don't rely on media playback for critical content.
Interactive elementsWhile 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
HTML Elements40
| Feature | Support |
|---|---|
| <abbr> | Supported |
| <acronym> | Supported |
| <address> | Supported |
| <audio> | Supported |
| <base> | Supported |
| <bdi> | Supported |
| <blockquote> | Supported |
| <body> | Supported |
| <code> | Supported |
| <del> | Supported |
| <dfn> | Supported |
| <dialog> | Supported |
| <div> | Supported |
| <form> | Supported |
| <h1> | Supported |
| <hr> | Supported |
| <img> | 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 |
CSS At-Rules5
| Feature | Support |
|---|---|
| @font-face | Supported |
| @import | Supported |
| @keyframes | Supported |
| @media | Supported |
| @supports | Supported |
Pseudo-Elements6
| Feature | Support |
|---|---|
| ::after | Supported |
| ::before | Supported |
| ::first-letter | Supported |
| ::first-line | Supported |
| ::marker | Supported |
| ::placeholder | Supported |
Pseudo-Classes & Selectors32
| 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 |
| :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 Properties160
Test your email across all 15 clients
Preview rendering, catch CSS issues, and get actionable fixes — free.
Try Emailens FreeSupport data last updated Apr 27, 2026 · synced from caniemail.com via @emailens/engine.