降级机制如何工作
降级引擎是 MailInApp 的核心。它的存在,是因为邮件客户端在几乎所有事情上都各行其是:有些能渲染现代 CSS,有些会完全剥离 <style> 标签,而经典版 Outlook 至今仍用 Microsoft Word 的排版引擎渲染邮件。与为最低公共标准去设计不同,你只需设计一次——引擎会把每个模块编译成三个层级。
三个层级
层级一 — 动态层(Kinetic)
完整的 CSS 互动效果:可滑动的轮播图、可展开的手风琴、可动画揭晓的翻转效果。动态标记基于 CSS 状态机构建——隐藏的复选框和单选输入,其 :checked 状态决定哪些内容可见——因为这正是邮件客户端真正支持的互动方式。从不使用 JavaScript;每个邮件客户端都会剥离它。
动态渲染可以触达 Gmail(网页版和移动应用)、Apple Mail、Yahoo Mail 和三星邮件——占消费者收件箱的绝大多数。
层级二 — 静态层
有些客户端会完全剥离 <style> 代码块(Gmail 也会从被裁剪的邮件中丢弃它们)。对这些客户端,每个模块都会折叠为简洁的堆叠内容,附带一个行动号召链接——用于投票、打开图库、提交表单——指向托管的实时预览。纯链接在 100% 的邮件客户端中都能工作,这也是这个层级具有普适性的原因。
层级三 — Outlook 层
经典版 Windows Outlook 用 Word 渲染邮件,既不支持动态 CSS,也不支持大多数现代布局。引擎会在 Outlook 条件注释内,为每个模块生成一个专用的、基于表格的版本——这段标记只有 Word 引擎才能看到。使用经典版 Outlook 的收件人会收到一封干净、经过精心设计的邮件,而不是一封错乱的邮件。
一封邮件,适配每一个收件箱
所有三个层级都封装在同一个 HTML 文件中。收件人看到哪个层级,取决于其客户端自身的渲染规则,而不是脆弱的客户端检测:
- 支持动态 CSS 的客户端会渲染层级一,并隐藏静态版本;
- 会剥离样式的客户端自然会渲染层级二;
- Word 引擎只会看到层级三,通过条件注释实现。
互动遵循同样的理念
收集数据的模块(投票、评分、表单)默认采用基于链接的互动——每个选项都是一个记录响应的纯链接——因为链接是唯一在所有场景下都能工作的基本单元。邮件内表单提交是在支持它的客户端上叠加的一层渐进增强。详情见互动与分析。
引擎拒绝做的事
引擎的职责之一就是学会拒绝。客户端支持薄弱或不一致的技术——JavaScript、嵌入式视频、<details> 元素、CSS 变量——无论演示效果多么诱人,都从不使用。如果一种技术无法优雅降级,它就不会上线。完整的支持情况见邮件客户端支持。
AMP for Email 会得到单独明确的说明,而不只是列表中的一句提及:这是一个刻意的权衡,而不是一个缺失的功能。参见为什么不选择 AMP for Email?