Apple Mail (macOS + iOS)

Apple Mail uses WebKit — the same engine as Safari. It is the most permissive major email client and supports nearly all modern CSS and HTML features. If your email only breaks in Apple Mail, the issue is almost certainly in your HTML/CSS, not a client limitation.

Engine

Both macOS Mail and iOS Mail use WebKit for rendering. This means they support the same features as Safari — flexbox, grid, CSS animations, CSS variables, WebP, SVG, video, and more.

What Works

  • Flexbox and CSS Grid (full support)
  • CSS custom properties (var())
  • CSS animations and transitions
  • CSS transforms
  • border-radius, box-shadow, text-shadow
  • Media queries (including prefers-color-scheme for dark mode)
  • WebP and AVIF images
  • Inline SVG
  • <video> and <audio>
  • Web fonts via @font-face
  • position: fixed, sticky, absolute
  • calc(), clamp(), min(), max()
  • Viewport units (vh, vw)

Dark Mode

Apple Mail is the leading dark-mode email client. It respects prefers-color-scheme: dark media queries. If you support dark mode, Apple Mail is where it will look best.

@media (prefers-color-scheme: dark) {
  body { background-color: #1a1a1a; }
  p { color: #e5e5e5; }
}

Caveats

Apple Mail automatically detects phone numbers, addresses, and dates and converts them into tappable links. This can change the visual appearance of text in ways you don't expect. To prevent it:

<meta name="format-detection" content="telephone=no, date=no, address=no">

Use Apple Mail as Your Baseline

Because Apple Mail is so permissive, it's a great baseline for testing your design. If something doesn't render correctly in Apple Mail, it's a code issue. Then progressively add fallbacks for Gmail and Outlook.

Key Takeaways

  • Full WebKit rendering — the most permissive major email client
  • Use it as a design baseline before adding cross-client fallbacks
  • Supports dark mode via prefers-color-scheme
  • Watch out for automatic phone/date/address link detection
  • Almost any modern CSS/HTML technique works here