Compatibility
One template renders for browsers or for inboxes. This page lists what each target emits, feature by feature, and the client limitations that drive the differences.
This matrix describes templates built with the visual editor. Code-mode templates render your HTML as written: for
target=email Postcraft inlines your stylesheet and adds a plain-text part, and a template that is already a full <!doctype> document passes through unchanged for both targets.How to read this page
Every row is enforced by tests against the real renderer: the output snippets further down are asserted verbatim in CI, and a guard test renders every block kind and checks that the techniques listed as avoided never appear in email output. If the renderer changes, this page has to change with it.
Works as is the same technique in both targetsDifferent technique same result, inbox-safe markupNot emitted deliberately avoided
Layout
| Feature | Browser target | Email target |
|---|---|---|
| Multi-column layout | Works as isFlexbox with a column gap. | Different techniqueTable cells with fixed pixel widths computed from the width inside the shell: 600px unless the theme sets another, less the shell padding. Flexbox fails in every Outlook variant and in Samsung Mail. |
| Responsive stacking | Works as isA media query flips the row to a column on small screens. | Different techniqueA media query stacks the cells with !important overrides. Media query support is partial in Outlook desktop and Gmail, so the fixed-width shell is the fallback, not an afterthought. |
| Content width | Works as isCSS max-width on the root element. | Different techniqueA width attribute plus an inline pixel width on the shell table, duplicated because the Word engine reads the attribute, not the CSS. |
Typography
| Feature | Browser target | Email target |
|---|---|---|
| Fonts | Not emittedWeb fonts are not emitted. A system font stack keeps text native on every OS. | Not emittedSame stack. @font-face support sits around 24% of clients, and Outlook falls back to Times New Roman when it sees one. |
| Styling delivery | Works as isOne stylesheet for the whole document. | Different techniqueEvery style is inlined on every element; the only <style> block is a single mobile media query. Gmail's stylesheet support depends on account type, tag placement, and a 16 KB cap. |
| Bold, italic, underline, links | Works as isSemantic strong, em, u, and anchor tags. | Works as isThe same semantic tags. Safe everywhere. |
Images and media
| Feature | Browser target | Email target |
|---|---|---|
| Images | Works as isFluid img with max-width 100%. | Works as isThe same, plus display:block and border:0 to neutralize client quirks (gaps under images, blue link borders). |
| Rounded images and row cards | Works as isCSS border-radius on the img, or on the row's background card. | Different techniqueThe same inline border-radius, honored everywhere except Outlook's Word engine, which squares it. There is no VML fallback as there is for buttons: an image can't be swapped for a shape without losing the image. |
| Background images | Not emittedNot emitted. Backgrounds are solid colors. | Not emittedNot emitted. Outlook needs VML for background images, so row backgrounds are solid colors set as both a bgcolor attribute and an inline style. |
| Charts | Works as isA server-rendered PNG via the {{chart}} helper. | Works as isThe same PNG, permanently cacheable and versioned. Canvas needs JavaScript and inline SVG dies in the Word engine, so charts are drawn server-side. |
| Icons | Works as isA server-rendered PNG via the {{icon}} helper. | Works as isThe same PNG. SVG images fail in Outlook desktop, Samsung Mail, and the Gmail apps on Google accounts, so icons are rasterized server-side with the color baked in. |
| Store badges | Works as isA server-rendered PNG via the {{storeBadge}} helper. | Works as isThe same PNG, for the same reason icons are rasterized. Each store's own lockup sits on one shared container so a row of badges is uniform, and a dark background gets the store's white colorway rather than a filtered black one. |
| Table layouts | Works as isPer-column alignment on a flat row model; styled cells through the rich-text pipeline. | Works as isThe same flat rows in one table, with alignment on the align attribute (which the Word engine honors) as well as in CSS, and cell styling inlined. |
| Code snippets | Works as isSyntax-highlighted panel via the {{codeblock}} helper, token colors inlined per span. | Different techniqueThe same inline-styled panel, with lines joined by <br> and indentation as non-breaking spaces, because the Word engine ignores white-space CSS. Outlook squares the corners and long lines wrap instead of scrolling. |
Buttons
| Feature | Browser target | Email target |
|---|---|---|
| Rounded corners | Works as isCSS border-radius, from the theme radius or the block's own. | Different techniqueA VML roundrect for Outlook, its arcsize derived from the same radius, and CSS border-radius for everyone else. The Word engine ignores border-radius entirely. |
| Button sizing | Works as isCSS padding on the link. | Different techniqueA fixed-width VML rectangle sized from the label, because Outlook ignores padding on anchor elements. |
Structure
| Feature | Browser target | Email target |
|---|---|---|
| Dividers | Works as isAn hr element. | Different techniqueA table cell drawing the line with border-top, collapsed with font-size 0 so only the border shows. |
| Vertical spacing | Works as isMargins. | Different techniqueCell padding, plus spacer cells locked open with font-size 1px and a non-breaking space so Outlook honors the height. |
| Layout tables and screen readers | Works as isNo layout tables to announce; the output is divs and semantic tags. | Works as isrole="presentation" on every layout table, so screen readers read the content instead of announcing rows and columns. |
Dark mode
| Feature | Browser target | Email target |
|---|---|---|
| Author-set dark rows | Works as isText and icons on a dark row background flip to white automatically. | Works as isThe same, with the white ink inlined on every element inside the row. |
| OS-level dark mode | Not emittedNot handled yet. Rendered output keeps its authored colors. | Not emittedNot handled yet. Client behavior is fragmented: Apple Mail honors prefers-color-scheme, while Yahoo and AOL rewrite the media query into invalid CSS. We will not claim support before it ships correctly. |
What the email target adds
- A plain-text alternative is generated on every
target=emailrender, ready for the text part of a multipart message (receiving clients pick the last part they can display, per RFC 2046). - Chart and icon URLs are absolute and served with a 30-day immutable cache, so an email opened years from now still renders its images.
Not supported in either target
Things Postcraft does not do today, listed here so you do not have to discover them the hard way:
- Video embeds. No block emits a video element or a thumbnail-plus-link pattern.
- Form elements. Inputs and buttons that submit do not survive email clients.
- Animated GIF handling. There is no first-frame fallback strategy for the Word engine yet.
- Custom or hosted web fonts, in either target (see Typography above).
- OS-level dark mode output (see Dark mode above).
Verify it yourself
These are real, test-enforced excerpts of what the email target emits. Create a template with the matching block, render it with target=email, and diff.
A button, email target
Outlook's Word renderer ignores padding and border-radius on links, so the email target emits a VML roundrect for Outlook behind a conditional comment, and a styled link (hidden from Outlook via mso-hide) for everyone else.
<tr><td align="center" style="padding:0 0 20px 0;font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',Arial,sans-serif;font-size:14px;line-height:1.6;color:#0c0a09" >
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:w="urn:schemas-microsoft-com:office:word"
href="https://example.com/start"
style="height:40px;v-text-anchor:middle;width:140px;"
arcsize="15%" stroke="f" fillcolor="#0c0a09">
<w:anchorlock/>
<center style="color:#ffffff;font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',Arial,sans-serif;font-size:14px;font-weight:bold;">Get started</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-- -->
<a class="postcraft-mobile-block" href="https://example.com/start"
style="background:#0c0a09;color:#ffffff;display:inline-block;padding:10px 20px;border-radius:6px;text-decoration:none;font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',Arial,sans-serif;font-size:14px;font-weight:600;mso-hide:all">Get started</a>
<!--<![endif]-->
</td></tr>A two-column row, email target
No flexbox: columns become table cells with computed pixel widths (the shell's 600px less its 24px of padding on each side and the column gap), duplicated as both a width attribute and an inline style. The postcraft-ecol class lets modern clients stack the columns on small screens; Outlook keeps the fixed widths.
<tr><td style="padding:24px 0px 24px 0px" >
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%"><tbody><tr>
<td class="postcraft-ecol" width="268" valign="top"
style="width:268px;vertical-align:top;padding-right:8px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%"><tbody>
<tr><td align="left" style="padding:0;font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',Arial,sans-serif;font-size:14px;line-height:1.6;color:#0c0a09" ><p style="margin:0;font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',Arial,sans-serif;font-size:14px;line-height:1.55;color:#0c0a09">Left column</p></td></tr>
</tbody></table>
</td>
<td class="postcraft-ecol" width="268" valign="top"
style="width:268px;vertical-align:top;padding-left:8px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%"><tbody>
<tr><td align="left" style="padding:0;font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',Arial,sans-serif;font-size:14px;line-height:1.6;color:#0c0a09" ><p style="margin:0;font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',Arial,sans-serif;font-size:14px;line-height:1.55;color:#0c0a09">Right column</p></td></tr>
</tbody></table>
</td>
</tr></tbody></table>
</td></tr>A divider, email target
No <hr>: a table cell draws the line with border-top, and font-size:0 with line-height:0 collapses it so only the border shows. A strut row above carries the extra section spacing as a td height, because the Word engine ignores margins. This renders identically everywhere.
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="width:100%">
<tr><td style="height:12px;font-size:0;line-height:0"> </td></tr>
<tr><td style="border-top:1px solid #e7e5e4;font-size:0;line-height:0"> </td></tr>
</table>Sources
- Can I email: CSS display flex - Unsupported in all Outlook variants and Samsung Mail.
- Can I email: CSS border-radius - Not supported by Outlook desktop on Windows; VML RoundRect is the workaround.
- Can I email: @media - Partial in Outlook desktop and Gmail (no nested queries; Gmail also drops height-based queries).
- Can I email: @media (prefers-color-scheme) - Fragmented: honored, ignored, neutralized, or rewritten depending on the client.
- Can I email: CSS background-image - Outlook desktop requires VML; Gmail can strip the whole style attribute around one.
- Can I email: @font-face - Roughly 24% support; Outlook falls back to Times New Roman.
- Can I email: SVG images - Fails in Outlook desktop, Samsung Mail, and Gmail apps on Google accounts.
- Can I email: <style> element - Gmail support is account-dependent, body placement is unsupported, and the tag is capped at 16 KB.
- Campaign Monitor: bulletproof email buttons - The VML roundrect + styled anchor pattern the email button target follows.
- RFC 2046, section 5.1.4: multipart/alternative - Receiving agents display the last part they support; the plain-text part rides first.
- Email on Acid: table role="presentation" - Without it, screen readers announce layout tables as data tables.