Not every CSS property or HTML feature works the same across all email clients. This reference shows you what's supported, what's partially supported, and what to avoid. The Email Love plugin handles most compatibility issues automatically, but understanding the landscape helps you design with confidence.
Layout & Structure
Feature | Apple Mail | Gmail | Outlook (Win) | Yahoo |
Table-based layouts | β
| β
| β
| β
|
Max-width | β
| β
| β | β
|
Responsive media queries | β
| β | β | β |
MJML responsive fallback | β
| β
| β
| β
|
Flexbox / Grid | β | β | β | β |
Typography
Feature | Apple Mail | Gmail | Outlook (Win) | Yahoo |
Custom web fonts | β
| β | β | β |
Google Fonts | β
| Partial | β | Partial |
Web-safe fonts | β
| β
| β
| β
|
Font size | β
| β
| β
| β
|
Line height | β
| β
| β
| β
|
Letter spacing | β
| β
| β | β
|
Visual Styling
Feature | Apple Mail | Gmail | Outlook (Win) | Yahoo |
Background color | β
| β
| β
| β
|
Background image | β
| β
| VML only | β
|
Border radius | β
| β
| β | β
|
Box shadow | β
| β | β | β |
Opacity | β
| β | β | β |
CSS gradients | β
| β | β | β |
Media & Interactivity
Feature | Apple Mail | Gmail | Outlook (Win) | Yahoo |
Images (JPG/PNG) | β
| β
| β
| β
|
Animated GIFs | β
| β
| 1st frame | β
|
SVG | β
| β | β | β |
Video | β | β | β | β |
JavaScript | β | β | β | β |
CSS animations | β
| β | β | β |
Forms/inputs | Partial | β | β | β |
Dark Mode
Feature | Apple Mail | Gmail | Outlook (Win) | Yahoo |
Custom dark mode CSS | β
| β | β | β |
Auto color inversion | β
| β
| β
| β
|
prefers-color-scheme | β
| β | β | β |
Note: Email client support changes over time. Gmail and Outlook regularly update their rendering engines. For the latest compatibility data, check caniemail.com.
