我可以发邮件吗?…

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 提供适用于您旅程各个阶段的云产品。 立即开始使用 价值 200 美元的免费积分!

虽然我 85% 确定您见过并使用过 我可以使用吗?…,但我敢打赌您只有 13% 的可能性见过并使用过 我可以发邮件吗?…。 它的氛围相同——提供有关 Web 平台功能的详细支持信息——只是不是针对 Web 浏览器提供支持信息,而是针对电子邮件客户端。 Campaign Monitor 也 长期维护着指南,但我承认我喜欢 Can I Use… 开创的设计风格。

HTML 电子邮件经常被调侃为必须以过时的方式进行编码(<table> 标签比比皆是!),但这可能并不公平。 Kevin Mandeville 谈论 了他在 2017 年如何将 CSS 网格(没错)用在了电子邮件中

我们 Litmus 的 Apple Mail 受众约为 30%,因此我们大部分订阅者能够看到网格桌面布局。

在不支持 CSS 网格的地方(以及设备/窗口宽度小于 850 像素的地方),我们回退到单列布局。

就像网站一样,对吧? 它们不需要在所有地方都看起来相同,只要体验在所有地方都可以接受即可。

我做 HTML 电子邮件的工作远没有做针对 Web 浏览器的 Web 工作多,但我确实做了一些! 例如,CSS-Tricks 的时事通讯一个向 MailChimp 模板提供内容的 RSS 提要。 我们发出的用于宣布 ShopTalk 新节目的电子邮件类似。 这两个都是非常简单的 MailChimp 模板,并通过一些 CSS 进行定制。

但我对 HTML 电子邮件进行的最直接的 CSS 处理是 CodePen 电子邮件的模板。 我们拥有各种各样的模板,从完全自定义的模板,到针对 The Spark 和挑战的特殊模板,当然还有事务性电子邮件。

这些都是完全从头开始的电子邮件模板。 能够知道自己可以依靠使用哪些 CSS 功能真的太好了。 例如,我对 flexbox 在电子邮件中支持得如此之好 感到惊讶。

始终值得考虑回退。 没有任何东西阻止您创建完全使用 CSS 网格 布局的电子邮件。 一些电子邮件客户端将 支持它,而另一些则不会。 当它得到支持时,就会出现一个花哨的布局。 当它不受支持时,假设您将源代码顺序保持清晰,您只会得到一列块(这本身就是大多数电子邮件的样子),这应该完全可行。

渐进增强在电子邮件中几乎更加直接,因为很少有功能需要担心。

直接链接 →