Apple Mail email CSS: what breaks, and what to write instead

280 of 300 features work in Apple Mail · 14 partial · 6 not supported. Of the 280 that work here, 85 work in 6 or fewer of the other 20 clients, so a check that passes here says little about the rest.

Works 280 · Partial 14 · Not supported 6 · Untested 0 · of 300

WebKit · desktop · prefers-color-scheme: works

Check your email, free

No signup · Five clients free, Outlook Classic included · All 21 with an account

The checker needs a computer screen.

See what breaks ↓

Apple Mail opens with a free account.

A free account opens all 21 clients and keeps your checks for 7 days. Create a free account →

@emailens/engine 0.18.22 · data last changed 10 Nov 2026

What we measured in real Apple Mail

In October 2026 we ran our probe sheets in real Apple Mail on a Mac, in light and dark mode. The Emailens live preview matched the real client on all 92 cases.
On a sheet of 38 features probed in October 2026, real Apple Mail applied every one.
In dark mode (November 2026), real Apple Mail recoloured an email that declares no colour scheme: white backgrounds turned #333333 and black text turned white. An email that declares color-scheme: light dark kept the colours it set.
Unstyled text renders at 12px, not the 16px a browser uses (October 2026).
Media queries in the newer syntax were ignored (October 2026): (width < 600px), not (min-width: 360px) and screen and (not (...)). The older spelling, @media not all and (min-width: 360px), works.

How we check the preview against real clients →

Apple Mail against Apple Mail iOS

They give the same answer on 284 of the 298 features both are tested on. Where they split:

Works in Apple Mail, not in Apple Mail iOS (7)

Works in Apple Mail iOS, not in Apple Mail (4)

<svg>partial here
Buggy.
<picture>partial here
<picture> tag is stripped in some cases (like having too few content or no background-color).
nestingpartial here
Partial.
<object>partial here
Partial support.

How Apple Mail renders email

Apple Mail on macOS renders email with WebKit, the engine behind Safari. It keeps <style> blocks and supports media queries, @font-face, flexbox, grid and CSS animations, so most email CSS works here as written. The risk runs the other way: a design that passes in Apple Mail can still break in clients that support far less.

text-decoration: In our October 2026 probe, the shorthand text-decoration: underline wavy #d33 was dropped whole, with no line at all. A single value works; set the style and colour with -webkit-text-decoration.
<svg>: Inline SVG draws only when the <body> has a background, a colour or an image, set as an attribute, inline or in the <style> block.
color-scheme: Works only on the html (root) element.
word-break and overflow-wrap: Apple Mail applies word-wrap: break-word by default, so word-break looks like break-all. overflow-wrap needs word-break: normal to reset it.
nesting: E { F {} } does not work; E { & F {} } does. Full support arrived in macOS 14.2.

What works in Apple Mail and breaks elsewhere

85 features work in Apple Mail and in 6 or fewer of the other 20 clients, so they need a fallback.

All 81

Not listed: <link>, <base>, @import, <body>, structural tags; the table below has them.

Apple Mail on real installs

The Emailens probe for each feature, captured on Apple Mail's own installs, next to the Emailens live preview of Apple Mail.

animation in a real Apple Mail (macOS)

The Emailens probe for animation on a real Apple Mail (macOS) — Apple Mail

The same probe in the Emailens live preview of Apple Mail — Apple Mail

overflow in a real Apple Mail (macOS)

The Emailens probe for overflow on a real Apple Mail (macOS) — Apple Mail

word-break in a real Apple Mail (macOS)

The Emailens probe for word-break on a real Apple Mail (macOS) — Apple Mail

Paste your email and see what Apple Mail does to it.

Check your email, free

No signup · Five clients free, Outlook Classic included · All 21 with an account

The checker needs a computer screen.

Dark mode in Apple Mail

Works @media prefers-color-scheme works in Apple Mail.

Works in 9 of 21.
Works color-scheme works in Apple Mail.

Works in 4 of 21.
Works meta-color-scheme works in Apple Mail.

Works in 2 of 21.

Measured in real Apple Mail, November 2026: an email that declares no colour scheme is recoloured in dark mode. One that declares color-scheme: light dark keeps its colours.

How to target Apple Mail

Selectors that single out Apple Mail, from the community list the engine ships (howtotarget.email). Copy one and replace .your-class-name.

css

3 lines

[class^="apple-mail"] .your-class-name {
  /* Replace this comment with your styles */
}

Targets both iOS and MacOS Applemail.

css

3 lines

.Singleton .your-class-name {
  /* Replace this comment with your styles */
}

Build one for several clients →

Before you send to Apple Mail

Decide dark mode yourself: declare color-scheme: light dark and write your own dark styles. Without a declaration, real Apple Mail recoloured the email in November 2026.
Write media queries in the older syntax, such as @media not all and (min-width: 360px). The newer syntax was ignored in October 2026.
Set a font-size on every text block. Unstyled text renders at 12px.

Every account includes one free real-device check in classic Outlook, Outlook for Mac and Apple Mail, after you verify your email and run one preview, while this month's free capacity lasts. How real-device checks work →

Your next question

Apple Mail iOS

Every feature in Apple Mail

Show all 300

What breaks here (20) Everything (300)

HTML Elements · 3 of 48 not supported or partial here

<abbr> Works Works in 14 of 21
<acronym> Works Works in 13 of 21
<address> Works Works in 20 of 21
<audio> Works Works in 4 of 21
<base> Works Works in 4 of 21
<bdi> Works Works in 6 of 21
<blockquote> Works Works in 19 of 21
<body> Works Works in 5 of 21
<button type="reset"> Works Works in 10 of 21
<button type="submit"> Works Works in 11 of 21
<code> Works Works in 20 of 21
<del> Works Works in 20 of 21
<dfn> Works Works in 17 of 21
<dialog> Works Works in 5 of 21
<div> Works Works in 20 of 21
<form> Works Works in 10 of 21
<h1> Works Works in 20 of 21
<hr> Works Works in 18 of 21
<img> Works Works in 19 of 21
<input type="checkbox"> Works Works in 16 of 21
<input type="hidden"> Works Works in 16 of 21
<input type="radio"> Works Works in 16 of 21
<input type="reset"> Works Works in 15 of 21
<input type="submit"> Works Works in 12 of 21
<input type="text"> Works Works in 13 of 21
<link> Works Works in 3 of 21
<marquee> Works Works in 8 of 21
<meter> Works Works in 11 of 21
<object> Partial support. Partial Works in 1 of 21
<p> Works Works in 20 of 21
<picture> <picture> tag is stripped in some cases (like having too few content or no background-color). Partial Works in 4 of 21
<pre> Works Works in 20 of 21
<progress> Works Works in 6 of 21
<rp> Works Works in 15 of 21
<rt> Works Works in 15 of 21
<ruby> Works Works in 15 of 21
<select> Works Works in 14 of 21
<small> Works Works in 20 of 21
<span> Works Works in 20 of 21
<strike> Works Works in 17 of 21
<strong> Works Works in 20 of 21
<style> Works Works in 16 of 21
<svg> Buggy. Partial Works in 5 of 21
<table> Works Works in 20 of 21
<textarea> Works Works in 13 of 21
<ul> Works Works in 7 of 21
<video> Works Works in 3 of 21
<wbr> Works Works in 16 of 21

HTML Attributes · 1 of 22 not supported or partial here

[align] Works Works in 17 of 21
[aria-describedby] Works Works in 9 of 21
[aria-hidden] Works Works in 13 of 21
[aria-label] Works Works in 13 of 21
[aria-labelledby] Works Works in 7 of 21
[aria-live] Works Works in 8 of 21
[background] Works Works in 16 of 21
[cellpadding] Works Works in 18 of 21
[cellspacing] Works Works in 18 of 21
[command] Works Works in 3 of 21
[dir] Works Works in 19 of 21
[height] Works Works in 18 of 21
[hidden] Works Works in 5 of 21
[lang] Works Works in 15 of 21
[loading] Works Works in 4 of 21
[popover] Works Works in 3 of 21
[required] Works Works in 7 of 21
[role] Works Works in 14 of 21
[srcset] Works Works in 4 of 21
[target] The attribute is supported but links always open in a new window anyway. Partial Works in 0 of 21
[valign] Works Works in 20 of 21
[width] Works Works in 18 of 21

HTML & Email Structure · 1 of 8 not supported or partial here

amp4email Not supported Works in 6 of 21
anchor-links Works Works in 12 of 21
doctype Works Works in 13 of 21
html-comments Works Works in 18 of 21
html5-semantics Works Works in 6 of 21
image-maps Works Works in 15 of 21
mailto-links Works Works in 17 of 21
meta-color-scheme Works Works in 2 of 21

CSS At-Rules · 0 of 10 not supported or partial here

@font-face Works Works in 6 of 21
@import Works Works in 4 of 21
@keyframes Works Works in 7 of 21
@media Works Works in 5 of 21
@media device-pixel-ratio Works Works in 10 of 21
@media hover Works Works in 9 of 21
@media orientation Works Works in 11 of 21
@media prefers-color-scheme Works Works in 9 of 21
@media prefers-reduced-motion Works Works in 9 of 21
@supports Works Works in 9 of 21

Pseudo-Elements · 0 of 6 not supported or partial here

::after Works Works in 6 of 21
::before Works Works in 6 of 21
::first-letter Works Works in 10 of 21
::first-line Works Works in 10 of 21
::marker Works Works in 10 of 21
::placeholder Works Works in 9 of 21

Pseudo-Classes & Selectors · 3 of 34 not supported or partial here

:adjacent-sibling Works Works in 16 of 21
:attribute-selector Works Works in 6 of 21
:chaining Works Works in 14 of 21
:checked Works Works in 9 of 21
:child-combinator Works Works in 16 of 21
:class-selector Works Works in 17 of 21
:descendant-combinator Works Works in 17 of 21
:first-child Works Works in 12 of 21
:first-of-type Works Works in 12 of 21
:focus Works Works in 10 of 21
:focus-visible Works Works in 6 of 21
:focus-within Works Works in 6 of 21
:general-sibling Works Works in 16 of 21
:grouping Works Works in 17 of 21
:has Works Works in 5 of 21
:hover Works Works in 12 of 21
:id-selector Works Works in 17 of 21
:lang Works Works in 6 of 21
:last-child Works Works in 12 of 21
:last-of-type Works Works in 12 of 21
:link Works Works in 13 of 21
:not Works Works in 6 of 21
:nth-child Works Works in 6 of 21
:nth-last-child Works Works in 6 of 21
:nth-of-type Works Works in 6 of 21
:only-child Works Works in 12 of 21
:only-of-type Works Works in 12 of 21
:target Not supported Works in 7 of 21
:type-selector Works Works in 17 of 21
:universal-selector Works Works in 16 of 21
:visited Not supported Works in 8 of 21
pseudo-class-active Partial. Partial Works in 8 of 21
pseudo-class-default Works Works in 10 of 21
pseudo-class-nth-last-of-type Works Works in 6 of 21

CSS Functions · 0 of 8 not supported or partial here

calc Works Works in 8 of 21
clamp Works Works in 6 of 21
conic-gradient Works Works in 6 of 21
fit-content Works Works in 11 of 21
linear-gradient Works Works in 9 of 21
max Works Works in 6 of 21
min Works Works in 6 of 21
radial-gradient Works Works in 10 of 21

CSS Properties · 12 of 164 not supported or partial here

!important Works Works in 11 of 21
accent-color Works Works in 5 of 21
align-items Works Works in 13 of 21
animation Works Works in 5 of 21
aspect-ratio Works Works in 5 of 21
backdrop-filter Works Works in 6 of 21
background Works Works in 16 of 21
background-blend-mode Works Works in 13 of 21
background-clip Works Works in 14 of 21
background-color Works Works in 21 of 21
background-image Works Works in 16 of 21
background-origin Works Works in 14 of 21
background-position Works Works in 20 of 21
background-repeat Works Works in 20 of 21
background-size Works Works in 17 of 21
bimi Works Works in 9 of 21
block-size Works Works in 7 of 21
border Works Works in 20 of 21
border-collapse Works Works in 19 of 21
border-image Works Works in 7 of 21
border-inline Works Works in 3 of 21
border-inline-individual Works Works in 3 of 21
border-inline-longhand Works Works in 4 of 21
border-radius Works Works in 16 of 21
border-radius-logical Works Works in 3 of 21
border-spacing Works Works in 17 of 21
bottom Works Works in 11 of 21
box-shadow Works Works in 14 of 21
box-sizing Works Works in 16 of 21
caption-side Works Works in 20 of 21
clear Works Works in 9 of 21
clip-path Works Works in 8 of 21
color Works Works in 21 of 21
color-scheme Works Works in 4 of 21
column-count Works Works in 16 of 21
columns Works Works in 16 of 21
css-comments Works Works in 14 of 21
cursor Partial. Partial Works in 2 of 21
custom-properties Works Works in 6 of 21
direction Works Works in 21 of 21
display Works Works in 13 of 21
display:flex Works Works in 18 of 21
display:grid Works Works in 18 of 21
display:none Works Works in 20 of 21
empty-cells Works Works in 14 of 21
filter Works Works in 7 of 21
flex Works Works in 13 of 21
flex-basis Works Works in 13 of 21
flex-direction Works Works in 12 of 21
flex-wrap Works Works in 13 of 21
float Works Works in 14 of 21
font Works Works in 20 of 21
font-family Works Works in 21 of 21
font-kerning Works Works in 13 of 21
font-size Works Works in 13 of 21
font-size-adjust Works Works in 10 of 21
font-stretch Works Works in 10 of 21
font-weight Works Works in 16 of 21
gap Works Works in 7 of 21
grid-template-columns Works Works in 7 of 21
height Works Works in 16 of 21
hyphenate-character Works Works in 4 of 21
hyphenate-limit-chars Not supported Works in 1 of 21
hyphens Works Works in 4 of 21
inert Works Works in 3 of 21
inline-size Not supported Works in 4 of 21
inset Works Works in 3 of 21
justify-content Works Works in 13 of 21
left Works Works in 11 of 21
letter-spacing Works Works in 20 of 21
light-dark Works Works in 3 of 21
line-height Works Works in 20 of 21
list-style Works Works in 11 of 21
list-style-image Works Works in 6 of 21
list-style-position Works Works in 19 of 21
list-style-type Works Works in 21 of 21
margin Works Works in 8 of 21
margin-block-start-end Works Works in 4 of 21
margin-inline-block Works Works in 6 of 21
margin-inline-start-end Works Works in 4 of 21
mask-image Works Works in 4 of 21
max-block-size Works Works in 5 of 21
max-height Works Works in 20 of 21
max-inline-size Works Works in 4 of 21
max-width Works Works in 20 of 21
min-block-size Works Works in 4 of 21
min-height Works Works in 19 of 21
min-inline-size Works Works in 5 of 21
min-width Works Works in 20 of 21
mix-blend-mode Works Works in 13 of 21
modern-color Works Works in 4 of 21
nesting Partial. Partial Works in 2 of 21
object-fit Works Works in 14 of 21
object-position Works Works in 14 of 21
opacity Works Works in 19 of 21
orphans Works Works in 10 of 21
outline Works Works in 20 of 21
outline-offset Works Works in 7 of 21
overflow Partial. Partial Works in 4 of 21
overflow-wrap Buggy. Partial Works in 2 of 21
padding Works Works in 20 of 21
padding-block-start-end Works Works in 4 of 21
padding-inline-block Works Works in 3 of 21
padding-inline-start-end Works Works in 4 of 21
position Partial. Partial Works in 2 of 21
resize Does not support inline and block values Partial Works in 1 of 21
rgb Works Works in 12 of 21
rgba Works Works in 12 of 21
right Works Works in 11 of 21
scroll-snap Works Works in 6 of 21
shape-margin Works Works in 6 of 21
shape-outside Works Works in 6 of 21
system-ui Works Works in 12 of 21
tab-size Works Works in 8 of 21
table-layout Works Works in 16 of 21
text-align Works Works in 13 of 21
text-align-last Works Works in 7 of 21
text-decoration Observed 2026-10-14 (Emailens real-device probe, Apple Mail (macOS)): The multi-value shorthand text-decoration: underline wavy #d33 was dropped whole: no line at all. Partial Works in 14 of 21
text-decoration-color Works Works in 17 of 21
text-decoration-line Works Works in 16 of 21
text-decoration-skip-ink Works Works in 7 of 21
text-decoration-style Works Works in 16 of 21
text-decoration-thickness Works Works in 7 of 21
text-emphasis Works Works in 9 of 21
text-emphasis-position Works Works in 4 of 21
text-indent Works Works in 13 of 21
text-justify Buggy. Not supported Works in 0 of 21
text-orientation Works Works in 13 of 21
text-overflow Works Works in 13 of 21
text-shadow Works Works in 12 of 21
text-transform Works Works in 20 of 21
text-underline-offset Works Works in 7 of 21
text-underline-position Partial. Partial Works in 8 of 21
text-wrap Works Works in 4 of 21
top Works Works in 11 of 21
transform Works Works in 7 of 21
transition Works Works in 4 of 21
unit-ch Works Works in 15 of 21
unit-cm Works Works in 20 of 21
unit-em Works Works in 20 of 21
unit-ex Works Works in 20 of 21
unit-in Works Works in 20 of 21
unit-initial Works Works in 12 of 21
unit-mm Works Works in 20 of 21
unit-pc Works Works in 20 of 21
unit-percent Works Works in 20 of 21
unit-pt Works Works in 20 of 21
unit-px Works Works in 20 of 21
unit-rem Works Works in 15 of 21
unit-vh Works Works in 17 of 21
unit-vmax Works Works in 15 of 21
unit-vmin Works Works in 15 of 21
unit-vw Works Works in 18 of 21
user-select Works Works in 3 of 21
vertical-align Works Works in 21 of 21
visibility Works Works in 13 of 21
white-space Works Works in 15 of 21
white-space-collapse Works Works in 4 of 21
widows Works Works in 10 of 21
width Works Works in 20 of 21
word-break Buggy. Partial Works in 4 of 21
word-spacing Works Works in 14 of 21
writing-mode Works Works in 13 of 21
z-index Works Works in 17 of 21