重温“老板式编程”：在电子邮件中成功使用 CSS

ahad1020

欢迎阅读“像老板一样编码，重温”系列的下一期。今天，我们将重点介绍如何在电子邮件中成功使用 CSS。在我的上一篇文章中，我们了解到主要坚持使用较旧的布局编码方法（例如表格）的优势。不幸的是，这种像 1999 年那样编写代码的趋势在电子邮件样式设计方面也延续了下来；现代 CSS 并没有像我们希望的那样得到广泛的支持，而且奇怪的是，在某些情况下，即使是基本的 CSS 也不受支持。总而言之，如果您不清楚哪些方法有效，哪些无效，那么在设计电子邮件时可能会遇到一些挑战，所以让我们深入研究一下，好吗？

电子邮件中常用的 CSS
就本文而言，我认为如果该功能至少被 75% 的主流电子邮件客户端支持，且无任何重大缺陷，则该功能“有效”。当然，这完全是主观的。

内部样式表
如今，大多数电子邮件客户端至少部分支持使用<style>标签在电子邮件的 <head> 元素中定义内部样式表。大多数基于 macOS 的电子邮件客户端都完全支持，而 Windows 上的 Outlook 则部分支持。Gmail 也提供部分支持，但如果您使用非 Gmail 帐户运行 Gmail 应用，则无法使用。注意：准备好在这篇文章中多次看到该免责声明。无论是否使用 Gmail 帐户，Gmail 的移动网页版邮箱都会将其完全移除。

使用 !important 关键字
由于 !important 关键字的基础性质，它应该谨慎使用，但在电子邮件开发中，它的使用频率却更高。虽然它得到了广泛的支持，但在主流电子邮件客户端中，它的使用存在着相当多的问题，坦白地说，相当挑剔：

Gmail：支持，但前提是关键字必须小写。
Gmail 应用程序：支持相同的小写警告，但内联样式属性内的使用仅限于非 Gmail 帐户。
Windows 版 Outlook：在 <style> 块中受支持，但必须在其前面添加空格。在内联样式属性中不受支持。
背景
值得庆幸的是，除了 Outlook 仅支持通过 CSS 设置背景颜色外，台湾电话号码库 其他电子邮件客户端都支持大多数背景 CSS 功能。一些更具体的功能，例如 background-blend-mode 或 background-size，仅在 Gmail 帐户的 Gmail 应用中受支持。

边界
基本边框受到广泛支持。然而，一旦开始关注诸如 border-image 或 border-radius 之类的功能，支持就会迅速下降。

方向
CSS 的方向功能在所有主流电子邮件客户端中均享有 100% 的支持，这实属难得。如果您不熟悉该功能，它用于确定元素文本的书写方向：从左到右（例如英语），或从右到左（例如阿拉伯语）。

展示
Display 也享有 100% 的支持，但其中 39% 的支持是部分支持的，只有某些 display 值被接受。标准值“inline”、“inline-block”、“block”和“none”均已全面支持（后者需在 Outlook 中注意）；一旦使用更现代的值，支持就会滞后。

字体
（注意：我说的是使用 CSS 控制字体的显示，而不是使用自定义字体；有关该主题的更多信息，请参阅一篇相关文章。）

字体简写是另一个 100% 支持的 CSS 功能，但有两个注意事项：

Gmail 应用程序仅支持 Gmail 帐户。
Windows Outlook 不支持除“正常”和“粗体”之外的任何字体粗细。0 到 599 之间的任何字体粗细值都显示为“正常”，600 及以上的任何字体粗细值都显示为“粗体”。
高度
你可能觉得这很简单，但电子邮件并非完全支持此功能。Windows Outlook 仅在某些特定元素上支持此功能，而其他电子邮件客户端则完全忽略它。

宽度
除了高度之外，这应该也是显而易见的。Windows 版 Outlook 再次出现了问题；它不支持 <body>、<span>、<div> 或 <p> 标签上的该属性。此外，它在将百分比宽度应用于图像时也存在 bug，因为计算的显示尺寸是基于电子邮件宽度的百分比，而不是图像包含元素的百分比。可以通过在图像本身添加“width”属性来解决这个问题。

利润
你可能会认为所有电子邮件客户端都会支持边距，但实际上只有大约 76% 的客户端完全支持。不支持的情况很奇怪，但像往常一样，Windows 上的 Gmail 和 Outlook 才是问题所在：

Gmail 不允许边距为负值。
Outlook 也不允许使用负边距。它也不支持在 <span> 和 <body> 元素上使用边距，也不支持使用“auto”值。渲染也可能存在问题，因为任何指定的背景颜色都包含在边距内。
填充
奇怪的是，在各个电子邮件客户端中，padding 的支持效果都比 margin 更好，95% 的客户端都完全支持。值得注意的一点是，Windows 版 Outlook 仅支持在 <td> 或 <th> 元素上使用 padding，并且应用于特定表格单元格的最大垂直 padding 将应用于该行的所有单元格。

字母间距
在主流电子邮件客户端中，字母间距 (letter-spacing) 属性享有 95% 的完全支持率，以及 5% 的部分支持率。Windows 上的 Outlook 无法获得 100% 的完全支持率，因为使用较大的负值时渲染会出现问题，而使用以“em”为单位的值时，字母间距会小于预期。