CSS邮件内联(样式属性内联)
将包含块的HTML转换为适用于电子邮件的标记,将每个CSS规则移动到内联style=""属性中。电子邮件客户端会剥离或忽略块,因此内联是确保设计在Gmail、Outlook、Yahoo和Apple Mail中保持一致的唯一可靠方法。
将您的完整HTML粘贴到左侧;该工具会解析每个选择器,精确地解析CSS特异性,就像浏览器一样,并将获胜的声明写入每个匹配的元素。对于:hover等伪类规则和任何@media查询,会保留在一个残余的块中,因为仍支持这些功能的电子邮件客户端需要它们。
如何使用
- 将您的HTML——完整的文档或带有块的片段——粘贴到输入字段中。
- 决定是否保留媒体查询和伪类规则(推荐用于响应式电子邮件)。
- 可选地在样式内联后移除类属性。
- 根据您希望获得可读或紧凑的结果,开启或关闭美化显示功能。
- 复制内联HTML或将其下载为文件,然后直接将其粘贴到您的电子邮件服务提供商中。
特征
- 特异性感知合并 – 精确解析ID、类、属性和元素类型,与浏览器级联方式一致。
- !important处理 – 外部的!important声明能正确覆盖普通内联样式,符合CSS规范。
- 媒体查询保留 – 保留响应式@media规则,以确保移动设备断点正常触发。
- 伪类降级 – :hover、:focus和::before规则无法内联;工具会将它们保留在一个精简的块中。
- 多个块 – 处理包含多个样式标签的文档 <head> 或 <body>.
- 可选的类属性移除 – 移除现在冗余的class=""属性,以获得更轻量的payload。
- 美化输出 – 以缩进格式的可读HTML或紧凑单行输出。
- 100% 客户端 – 您的HTML永远不会离开浏览器。无需上传,无需服务器处理。