Definition
Apple Mail is the default email client on Apple devices, including macOS, iOS, and iPadOS. It uses the WebKit rendering engine, which provides the most comprehensive CSS support of any major email client. Apple Mail supports CSS features that are unavailable in Gmail, Outlook, and Yahoo Mail, including CSS animations, transitions, @supports queries, and a wide range of modern CSS selectors.
Apple Mail's strong CSS support makes it the preferred client for advanced email designs. Developers can use CSS Grid (with limitations), Flexbox (partial support), background-image, border-radius, box-shadow, gradient, and transform. Apple Mail also supports prefers-color-scheme for dark mode and prefers-reduced-motion for accessibility. The WebKit engine on iOS additionally supports -webkit prefixed properties for enhanced styling.
Apple Mail accounts for approximately 25–30% of email opens, depending on the industry and audience. Its market share is higher among consumer audiences and lower in B2B environments where Outlook dominates. The introduction of Mail Privacy Protection (MPP) in iOS 15 significantly impacted email analytics by pre-loading email content, including images, regardless of user engagement.
Best Practices
Leverage Apple Mail's advanced CSS support for visual enhancements but ensure core content and CTAs work without those enhancements. Use progressive enhancement so that Gmail and Outlook receive a functional version.
Test dark mode specifically in Apple Mail. Apple Mail applies system-wide dark mode to emails and supports both prefers-color-scheme media queries and automatic colour inversion. Set explicit dark mode colours to maintain brand consistency.
Use @supports feature queries to apply WebKit-specific rules only when the client supports them. This keeps your CSS clean and prevents unsupported properties from causing issues in other clients.
Be aware of Mail Privacy Protection's impact on open rates. Apple Mail pre-loads images, inflating open counts. Do not rely solely on Apple Mail open rates for campaign performance analysis.
Avoid relying solely on Apple Mail-specific features for critical functionality. A button that uses only CSS transitions for its hover state should still have a visible default state that works without animation.
Related Glossary Terms
Email Background Image
A background image applied to an email's table cell or container, requiring VML fallbacks for Outlook due to its lack of CSS background-image support.
Email Conditional
Proprietary conditional comments used to target Microsoft Outlook with specific HTML or VML code for cross-client email rendering.
Email Ghost Table
A responsive email technique using hidden tables to conditionally show or hide content for mobile and desktop layouts across all email clients.
Email Gmail CSS
The subset of CSS supported by Gmail, which strips most `<style>` block rules and requires inline CSS for reliable rendering across web and mobile.
Email Graceful Degradation
An email design strategy that starts with a feature-rich layout and systematically reduces complexity for clients with limited rendering capabilities.
Email Image Hosting
The practice of serving email images from dedicated servers or CDNs optimised for fast delivery, high availability, and compatibility with email client caching.
Frequently Asked Questions
Yes, Apple Mail on both macOS and iOS supports CSS animations (`@keyframes` and `animation` properties) and CSS transitions. This allows animated hover effects, loading animations, and scroll-triggered animations within email.
While Apple Mail has the best CSS support, it does not support some advanced CSS features. CSS Grid is partially supported and may not work reliably for complex layouts. `position: fixed` and `position: sticky` are not supported. Some advanced pseudo-elements may behave inconsistently.
Unlike Gmail and Outlook, Apple Mail does not block images by default. Users can enable image blocking in settings, but the default is to load all images. Apple Mail's Mail Privacy Protection can pre-load images even when images are set to block.
Mail Privacy Protection (MPP) is a feature introduced in iOS 15 that pre-loads email content, including images and tracking pixels, in the background. This prevents senders from knowing when or if the recipient actually opened the email, as opens are recorded regardless of user interaction.
Yes, you can target Apple Mail using WebKit-specific CSS selectors. The `@supports (-webkit-overflow-scrolling: touch)` query targets iOS Safari and iOS Mail specifically. You can also use `@media query` and `prefers-color-scheme` for dark mode targeting.