把邮件的 CSS 内联化
Outlook 和好几个网页邮箱要么忽略、要么直接删掉 <style> 代码块。内联化是那个枯燥、机械的步骤，介于“在浏览器里能用的设计”和“在收件箱里能用的设计”之间。
- 完全在你的浏览器里运行
- 断网也能用
- 不上传
- 不用注册
- 没有水印
正在加载工具……
工作原理
- 粘贴带 <style> 代码块的 HTML。
- 按“Inline the CSS”（内联 CSS）。
- 复制或下载结果，在下面的预览里检查一遍。
为什么什么都不用上传
这个页面上的每一步操作，都由运行在你浏览器标签页里的代码完成，用的就是渲染网页的那套引擎。文件从磁盘读进标签页的内存，在那里被处理，再作为下载写回去。它不会被送到任何地方 —— 不会送给我们，也不会送给第三方。
自己动手验证
- 打开浏览器的开发者工具（F12），选择“网络”（Network）面板。
- 载入你的文件，运行这个工具。
- 你能看到的请求只有这些：工具自己的代码 —— 少数几个重型工具还会从公共 CDN 取它们的开源引擎 —— 外加一条发往 loreatec.jp 的小小访问记录（页面地址和标题，仅此而已）。没有一条带着你的文件。
常见问题
为什么媒体查询没法内联？
因为内联样式不带任何附加条件 —— 它永远生效。而媒体查询本身就是一个条件，所以它只能待在 <style> 代码块里。这就是为什么一封响应式邮件两者都需要：内联样式负责基础设计，<style> 代码块负责手机版布局，同时也要接受一个事实 —— 那些会删掉 <style> 的客户端，只会显示基础设计。
:hover 会怎么样？
同样的问题，同样的答案：它留在 <style> 代码块里。把悬停效果当成支持它的客户端才有的额外福利，而不要让邮件的内容依赖于它。
我原本写的内联样式，和样式表里的规则，谁说了算？
你写的那个。任何已经写在 style 属性里的内容都会被保留，并且排在来自样式表的规则之后，所以它依然会覆盖那些规则 —— 和在浏览器里的行为一样。
这和我用的邮件营销工具做的事是一回事吗？
大多数工具确实是在发送时做内联处理，没错。这个工具适用的场景是：你要把 HTML 交给别人、通过 API 发送，或者在排查某条规则为什么没能保留下来。