← CSS Support IndexDoes CSS
Does CSS @media Work in HTML Email?
Applies a block of CSS rules conditionally based on media type or feature queries.
Quick Answer
Does @media work in HTML email?
The CSS @media property is supported in Outlook (Mac / Web), Apple Mail, ProtonMail, Fastmail. It is NOT supported in Outlook (Windows), Thunderbird. Always include a safe fallback for unsupported clients.
Which Email Clients Support CSS @media?
CSS support for @media across email clients
| Email Client | Desktop | Mobile / Web | Notes |
|---|---|---|---|
| Gmail | ~ Partial | ~ Partial | — |
| Outlook (Windows) | ✗ No | ? | — |
| Outlook (Mac / Web) | ✓ Yes | ~ Partial | — |
| Apple Mail | ✓ Yes | ✓ Yes | — |
| Yahoo! Mail | ~ Partial | ~ Partial | — |
| Samsung Email | ? | ~ Partial | — |
| Thunderbird | ✗ No | ? | — |
| ProtonMail | ~ Partial | ✓ Yes | — |
| Fastmail | ✓ Yes | ? | — |
Notes
- #1 Partial. Does not support nested media queries.
- #2 Partial. Only supports `screen`, `min-width`, `max-width`, `min-height` and `max-height` based media queries.
- #3 Buggy. Requires a double `<head>` hack to work.
- #4 Partial. Does not support simple `@media {}` declarations.
- #5 Buggy. The first rule inside a media query is not prefixed.
- #6 Partial. Not supported with non Google accounts.
- #7 Partial. Does not support height based media queries.
- #8 Partial. Does not support landscape media query.
- #9 Partial. Not supported with Hotmail/Outlook accounts.
- #10 Partial. Nested media queries are removed.
Frequently Asked Questions
Related CSS Properties
Test Your Email Now
Paste your HTML and see how it renders in clients that don't support @media.