Email CSS & Styling Support Guide
Exhaustive technical reference on CSS style support in email: what styles are unsupported, what styles are partially supported, and how PostBrix handles fallbacks.
Key Takeaways
- Email clients do NOT use modern web browser engines: desktop Outlook relies on Microsoft Word, while Gmail app strips non-inline styles.
- Strictly Unsupported in Email: CSS Grid, Flexbox, position: absolute/fixed, z-index, calc(), CSS variables (var()), @keyframes animations, and viewport units (vw/vh).
- Partially Supported with Quirks: border-radius, background-image, box-shadow, custom web fonts (@font-face), and media queries.
- PostBrix automatically compiles designs into nested tables, MSO conditional comments, and VML vector tags to deliver 100% rendering stability everywhere.
Why Email CSS Differs from Web CSS#
Web development has standardized around modern CSS Grid, Flexbox, and CSS Variables. Email development, however, remains constrained by fragmented rendering engines:
- Microsoft Word Engine (Outlook 2007–2021 on Windows): Strips almost all modern CSS, including
float,position,display: flex,border-radius, andbackground-image. - Blink / Gecko (Gmail Web, Yahoo, Outlook.com): Strips
<head>styles under certain forwarding and clipping scenarios, requiring critical properties to be inlined directly onto HTML elements. - WebKit (Apple Mail macOS & iOS): The only major engine that supports modern web CSS, media queries, and dark mode controls.
To guarantee that your email looks intentional in all inboxes, you must design within the boundaries of email client capabilities.
CSS Properties NOT Supported in Email Clients#
The following CSS features must never be relied upon in email development because they fail or break layouts in major clients:
1. Modern Layout Engines
display: flex/display: grid: Completely ignored by Outlook desktop; partially broken in Gmail Android. Solution: Use PostBrixmj-sectionandmj-columntable grids.position: absolute/position: fixed/position: sticky: Stripped or ignored by Outlook, Gmail, and Yahoo. Elements will collapse to static flow or overlap awkwardly.float: left/float: right: Stripped by Outlook desktop. Always use table cells (<td>) for multi-column alignment.z-index: Has no effect in Outlook desktop and is stripped by Gmail.
2. Modern Units & Computations
- CSS Custom Properties (Variables)
var(--primary): Ignored by Outlook desktop and Gmail. All colors and spacings must be resolved to static hex or pixel values. calc(): Stripped by Outlook desktop and ignored in several webmail clients.- Viewport Units (
100vw,100vh): Ignored or causes massive horizontal scrollbars. rem/emUnits: Unreliable scaling across email clients. Always use explicitpxvalues for font sizes, padding, and borders.
3. Motion & Advanced Visual Effects
- CSS Transitions &
@keyframesAnimations: Stripped by Outlook desktop and Gmail. Only Apple Mail supports CSS keyframe animations. box-shadow: Ignored by Outlook desktop. Use subtle border outlines (border: 1px solid #e2e8f0) instead.filter/backdrop-filter: Stripped by almost all email clients.- External Stylesheets (
<link rel="stylesheet">): Stripped by Gmail and webmail clients for security. All CSS must live in the<head><style>or inline on elements.
Partially Supported Styles & Client Quirks#
These properties work in modern WebKit/Blink clients, but require specific fallback mechanisms for Outlook:
border-radius: Supported in Apple Mail, Gmail, and modern webmail. In Outlook desktop (Word engine), it is ignored and renders as crisp rectangular corners.background-image: Supported natively in Apple Mail and Gmail. Outlook desktop ignores CSSbackground-imageon table cells; PostBrix automatically generates Microsoft VML (<v:rect><v:fill>) to render background graphics in Outlook.- Web Fonts (
@font-face): Supported in Apple Mail and Outlook Mac. Outlook Windows reverts to Times New Roman if custom fonts are declared without MSO fallback comments. PostBrix injects<!--[if mso]>system font overrides to guarantee Arial/Georgia fallbacks. - Media Queries (
@media): Supported in Apple Mail and official Gmail apps. Stripped by third-party accounts synced via Gmail POP/IMAP, or when emails exceed 102 KB.
Master CSS Property Compatibility Matrix#
How PostBrix Solves Email CSS Automatically#
You do not have to write brittle table hacks by hand. PostBrix handles email CSS through four architectural safeguards:
- Table-First Layout Architecture: All visual elements are wrapped in semantic
<table>,<tr>, and<td>structures. - Microsoft VML Injection: Buttons and background images automatically generate Microsoft Office Vector Markup Language tags for Outlook 2016–2021.
- Automated Style Inlining: Colors, typography, and cell padding are inlined directly onto element attributes while preserving responsive media queries in the
<head><style>. - Fluid Hybrid Fallbacks: Columns use percentage widths with calculated desktop max-widths, ensuring emails remain readable even if a client strips media queries.
Frequently Asked Questions
Why cannot I use CSS Flexbox or CSS Grid in email?
Microsoft Outlook desktop (which accounts for significant corporate B2B opens) uses Microsoft Word as its rendering engine, which was created before CSS Flexbox and Grid existed. PostBrix uses strict table rows and columns to achieve identical grid layouts across all clients.
Can I use CSS variables like var(--primary-color) in PostBrix?
No. CSS variables are not supported by Outlook desktop or Gmail. PostBrix automatically resolves your brand color tokens into static 6-digit hex values (#4f46e5) during compilation.
How does PostBrix ensure buttons look rounded if Outlook does not support border-radius?
PostBrix compiles buttons to VML <v:roundrect> shapes in Outlook desktop, preserving rounded corners where supported and gracefully falling back to crisp rectangular table cells in older Word engines.
Can I use CSS animations or GIF images in email?
CSS keyframe animations are stripped by Gmail and Outlook desktop. If you need animation, use an animated GIF image, which plays smoothly in Apple Mail and webmail (Outlook desktop will display the first frame).