我最近一直在为我的一个客户编写一份时事通讯。我似乎无法找到关于哪些 css 和 html 可以在主要邮件客户端中安全使用的好信息。
我想也许这里有人有知识,我们可以创建一些在主要邮件客户端中工作的东西的列表。
这是我从活动监视器借来的流行邮件客户端列表。(如果我忘记了什么请告诉我)
Microsoft Outlook
Apple Mail
Hotmail
Yahoo! Mail
Gmail
问题是这些主要浏览器中有哪些标签、属性、特殊怪癖以及如何轻松避免它们。
谢谢您的帮助,
在 Campaign Monitor 中,常见邮件客户端中的 CSS 支持的详细而全面的列表。
您可以在电子邮件标准项目中找到所有主要电子邮件客户端支持和不支持的 CSS 功能的完整列表
一个非常有用的开发 HTML 电子邮件的引导程序,它有大量的差异消除器是HTML Email Bolerplate
作为一般规则 - 始终使用表格和所有老式 HTML 标记(align
、center
、valign
等color
)。一些关于该主题的阅读。
这里有几篇文章可以帮助您入门:
http://css-tricks.com/using-css-in-html-emails-the-real-story/
这是一个电子邮件 css 备忘单。http://intenseminimalism.com/2010/email-css-cheatsheet/
PDF 为不同邮件客户端中的 CSS 支持提供表格格式:为不同操作系统上的 Web 客户端、桌面客户端和移动邮件客户端提供信息。
Gmail 已经支持style
头部标签
您可以使用 CSS 选择器的子集来应用样式。Gmail 支持类、元素和 ID 选择器。
<html>
<head>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
</style>
</head>
<body>
<div id='body'>
<p>Hi Pierce,</p>
<p class='colored'>This text is blue.</p=>
<p>Jerry</p>
</div>
</body>
</html>
和媒体查询:
您可以使用标准 CSS 媒体查询来调整电子邮件的样式以适应用户当前的设备。Gmail 支持针对屏幕宽度、方向和分辨率的查询。
<html>
<head>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
@media screen and (min-width: 500px) {
.colored {
color:red;
}
}
</style>
</head>
<body>
<div id='body'>
<p>Hi Pierce,</p>
<p class='colored'>
This text is blue if the window width is
below 500px and red otherwise.
</p>
<p>Jerry</p>
</div>
</body>
</html>