Apple Mail is one of the largest email clients, used on iPhone, iPad, and macOS computers. It's of interest to email developers for two reasons. On one hand, the client is built on the WebKit engine and supports many modern HTML and CSS features. On the other hand, it has its own quirks that affect how emails display and the accuracy of analytics.

When developing campaigns for Apple Mail, you need to account for dark mode behavior, Mail Privacy Protection (MPP), automatic conversion of phone numbers and addresses into links, and differences between the mobile and desktop versions of the app.

This article gathers up-to-date data on HTML and CSS support in Apple Mail, code examples, and recommendations for testing emails.

HTML and CSS support

Markup and structure

Feature

iPhone Mail

iPad Mail

Mac Mail

Comment

Table-based layout (table)

✅

✅

✅

The main way to build email layouts

max-width

✅

✅

✅

Supported

inline-block

✅

✅

✅

Good for responsive columns

Flexible containers (Flexbox)

✅

✅

✅

Supported, but rarely used as the basis of an email layout

Grid layout (CSS Grid)

✅

✅

✅

Supported, but not suitable for cross-client layout

Media queries (@media)

✅

✅

✅

Supported

Tables remain the foundation of email layout for Apple Mail. Despite partial support for modern CSS mechanisms, it's the table structure that provides the most stable display across different email clients.

CSS feature

Support

CSS animations (@keyframes)

✅

Transitions (transition)

✅

Transforms (transform)

✅

Dark mode (prefers-color-scheme)

✅

Absolute positioning (position:absolute)

⚠️

Fixed positioning (position:fixed)

❌

Media queries are supported across all Apple platforms and let you adapt the layout to different screen sizes, change column arrangement, and control how elements display in dark mode.

Fonts and typography

Feature

iPhone Mail

iPad Mail

Mac Mail

Comment

System fonts

✅

✅

✅

Supported

@font-face

✅

✅

✅

Loading external fonts is supported

Google Fonts

✅

✅

✅

Requires a fallback stack

-webkit-text-size-adjust

✅

✅

✅

Recommended for use

Automatic phone number detection

⚠️

⚠️

❌

Relevant for iOS

Apple Mail supports external fonts via @font-face and Google Fonts. However, this feature is unavailable or limited in other popular clients, so a fallback font stack should be specified for every font.

font-family: «Montserrat», Arial, Helvetica, sans-serif;

For mobile devices, it's recommended to use:

-webkit-text-size-adjust: none;

Without this property, iOS may automatically enlarge parts of the text.

Background images and graphics

Feature

iPhone Mail

iPad Mail

Mac Mail

Comment

background-image

✅

✅

✅

Supported

background-size: cover

✅

✅

✅

Supported

Retina images

✅

✅

✅

Recommended

WebP

✅

✅

✅

Supported

GIF animation

✅

✅

✅

Supported

Standard CSS is enough for background images:

background-image: url(bg.png);

background-position: center top;

background-repeat: no-repeat;

background-size: cover;

Unlike Outlook for Windows, no additional VML-based constructs are required.

For high pixel density screens, it's recommended to use double-resolution images and constrain their size via width and max-width.

Dark mode

Apple Mail supports dark mode and automatically changes interface colors based on device settings. Light backgrounds can become dark, and dark text can become light. Images usually remain unchanged.

In practice, this can cause problems with logos, icons, and interface elements designed only for a light background.

To control the display, it's recommended to add to <head>:

<meta name=»color-scheme» content=»light dark»>

<meta name=»supported-color-schemes» content=»light dark»>

and use separate styles for dark mode:

@media (prefers-color-scheme: dark) {

.body-bg {

background-color: #1e1e1e !important;

}

.dark-text {

color: #f5f5f5 !important;

}

}

Before sending, it's a good idea to check the email in at least two display modes.

Mail Privacy Protection (MPP)

With the release of iOS 15, Apple enabled Mail Privacy Protection for Apple Mail users.

The technology loads images through Apple's proxy servers even before the email is actually opened. As a result, the tracking pixel can fire regardless of whether the user actually viewed the message.

MPP's impact on analytics

Feature

Behavior

Consequence

Open pixel

Preloaded

Open Rate can no longer be used as an accurate measure of actual opens.

IP detection

Hidden

Geolocation unavailable

Open time

Not recorded accurately

The metric loses reliability

Link clicks

Work as normal

Remain the primary source of data

After MPP was rolled out, open rate stopped being a reliable measure of engagement. To assess campaign effectiveness, it's better to use data on clicks, conversions, and user actions after clicking through.

Automatic formatting

On iPhone and iPad, Apple Mail automatically detects phone numbers, addresses, and dates, converting them into links in the system color.

This can alter the email's design. To keep control over the styling, phone numbers should be marked up as links from the start:

<a href=»tel:+74951234567″

style=»color:inherit;text-decoration:none;»>

+7 (495) 123-45-67

</a>

In this case, Apple Mail uses the styles defined by the developer.

Interactive elements

Feature

iPhone Mail

iPad Mail

Mac Mail

CSS animations

✅

✅

✅

Collapsible blocks (CSS Accordion)

✅

✅

✅

HTML forms

⚠️

⚠️

⚠️

:hover

❌

❌

✅

HTML5 video

⚠️

⚠️

✅

AMP for Email

❌

❌

❌

Apple Mail supports a number of interactive scenarios, including CSS accordions, animations, and some HTML forms inside the email.

However, these elements should be treated as an additional interface enhancement. For Gmail, Outlook, and other clients, it's recommended to provide alternative display scenarios.

Apple Mail, Outlook, and Gmail: feature comparison

Feature

Apple Mail

Outlook (Windows)

Gmail

@font-face

✅

❌

❌

Background images

✅

❌

✅

Media queries

✅

❌

⚠️

Accordion blocks

✅

❌

❌

HTML forms

⚠️

❌

❌

AMP for Email

❌

❌

✅

Dark mode via @media

✅

⚠️

❌

:hover

✅ (macOS)

❌

❌

What to check before sending

☐ Checked display in light mode

☐ Checked display in dark mode

☐ Fallback fonts added

☐ Phone numbers styled as links

☐ High-resolution images prepared

☐ Alternative scenario provided for interactive elements

☐ Email tested in Apple Mail

Apple Mail supports most technologies used in modern email coding, including media queries, web fonts, background images, and a number of interactive elements. The main challenges aren't related to HTML and CSS rendering, but to platform-specific features: Mail Privacy Protection, dark mode, and automatic content formatting.

When developing campaigns, it's recommended to test the email in at least the mobile and desktop versions of Apple Mail, as well as check its display in both light and dark themes.

How Letteros helps with Apple Mail

Manually testing an email in real Apple Mail before every send takes time. Letteros has a built-in rendering feature for 100+ email clients, including Apple Mail on different iPhone versions, iPad, and Mac Mail.

  • Dark mode preview — right in the editor, the «◑» button in the bottom panel
  • Responsive layout by default — media queries are already built into the template
  • Typography tool — adds non-breaking spaces, reducing the chance of auto-formatting
  • Master template — set up fallback fonts, dark mode, and styles once for all your emails

Also read:

Попробовать Letteros бесплатно