电子邮件开发指南-第2章 为HTML电子邮件添加互动

交互式元素可以大大增强HTML电子邮件的效果，使其脱颖而出。即使没有JavaScript，我们也可以使用CSS伪类，如:hover或:checked，在HTML邮件中创建交互式组件。我们还可以做一些事情，比如使用悬停效果以更吸引人的方式呈现按钮，或者在显示的按钮后面添加相关内容。

在本章中，我们将看看可以在HTML电子邮件中使用的三个交互式内容示例：

2.1 链接按钮的悬停效果

链接按钮上的悬停效果是一种简单的交互，您可以添加这些交互来使您的号召性用语更吸引人、更具吸引力。如下图所示（You’re in! Welcome to the DesignBetter.Co community - Desktop View | Really Good Emails）：

 

我们所需要的就是CSS :hover伪类。在电子邮件客户端中对这一点的支持非常好。它在苹果邮件（macOS，iOS）、Gmail（桌面网络邮件）、Outlook（macOS）、Outlook.com和雅虎邮件（桌面网络邮件）等中都可以使用。

在Outlook.com中只有一个怪癖，即:hover（以及其他伪类）只在类型选择器上被支持。因此，例如，Outlook.com不会支持.button:hover，但它会支持a:hover。通常解决这个问题的方法是给父元素添加一个类属性，然后用这个元素来代替里面的链接作为目标。

下面是一个HTML电子邮件中的链接按钮的代码例子：

<table class="email-btn" border="0" cellpadding="0" cellspacing="0" role="presentation" align="center" style="margin:0 auto; max-width:100%; background:#2ea44f; border-radius:5px; overflow:hidden; border-collapse:separate;">
    <tr>
        <td height="48" style="mso-padding-alt:0 16px; text-align:center;">
            <a href="https://www.example.com" target="_blank" style="display:block; min-width:128px; padding:14px 16px; color:#fff; font:bold 16px/20px Helvetica Neue, Roboto, sans-serif; text-decoration:none; text-align:center;">Call to Action</a>
        </td>
    </tr>
</table>

下面是将鼠标悬停在该链接按钮上时进行简单颜色切换的样式：

.email-btn a:hover {
    background-color: red !important;
}

2.2 悬停时交换图片

:hover的另一个有趣的用例是交换图片。这在网络上的电子商务网站上非常常见--例如，显示同一产品的不同视图，默认情况下是正面，而悬停时是背面。

这是上图中显示的 HTML： 

<div class="image-swap-group">
    <div>
        <img src="https://i.imgur.com/TSuCstim.jpg" alt="T. rex rampage box front view" width="160" height="160" style="vertical-align:middle;" class="image-front" />
        <!--[if !mso]><!-->
        <img src="https://i.imgur.com/aaCOaRUm.jpg" alt="T. rex rampage box back view" width="160" height="160" style="display:none; vertical-align:middle;" class="image-back" />
        <!--<![endif]-->
    </div>
</div>

而这里是CSS：

.image-swap-group div:hover .image-front {
    display:none !important;
}

.image-swap-group div:hover .image-back {
    display:block !important;
}

以下是它的工作原理：

1. 首先，我们有两个图像，每个图像都有自己的类（image-front和image-back）。

2. 然后我们通过在内联样式中添加 display:none 来隐藏第二张图片。

3. 我们还在第二个图像周围添加条件注释（<!--[if ！mso]><!-->），以便从Windows的Outlook中隐藏它。（另一个技巧是使用属性 mso-hide:all。我通常避免这样做，因为它在直接应用于<img>元素时不起作用，而且需要在你想隐藏的每个<table>元素上重复使用。在Outlook中回复或转发邮件时，它也会被破坏，使隐藏的内容暴露在众目睽睽之下。）

4. 我们将两个图像包装在两个<div>元素中。第一个有个image-swap-group 的类，我们要用它来定位里面的<div>。(这样，我们只使用一个类型选择器，这是对第一个按钮例子中提到的Outlook.com错误的一种变通方法)。

2.3 点击时切换内容

通过结合HTML表单控件--如复选框（<input type="checkbox">）或单选按钮（<input type="radio">）--和CSS伪类：checked，我们可以根据点击（或在触摸设备上点击）创建更强大的交互。让我们看看我们如何创建下面的界面，在这个界面中，点击一个按钮就会显示新的内容。

下面的图片显示了雅虎邮箱中点击后的内容切换。

2.3.1 基本复选框

首先，下面是一个基本的复选框 HTML 示例：

<input type="checkbox" id="email-checkbox" />
<label for="email-checkbox">Toggle checkbox</label>

for属性被设置为复选框的id值。这将两者联系在一起，这样不仅对可访问性更好，而且还允许点击<label>来切换复选框的值。

使用CSS伪类:checked，我们可以在复选框被选中时对<label>应用特定样式。为此，我们使用了CSS相邻的兄弟姐妹组合器（+），它允许将一个元素（这里是标签）直接定位到HTML中的另一个（输入）旁边：

input:checked + label {
    background-color: green;
}

2.3.2 将复选框包裹在标签内

虽然上面的解决方案在Apple Mail或Outlook.com等电子邮件客户端中运行良好，但在Yahoo Mail中却不工作。这是因为，在解析我们的HTML邮件代码时，雅虎邮箱通过添加一个随机的前缀来改变id值。但它不会对for属性应用相同的过程。下面是我们前面的基本复选框代码在雅虎邮箱中的样子：

<input type="checkbox" id="yiv0123456789email-checkbox" />
<label for="email-checkbox">Toggle checkbox</label>

id和for属性值不再匹配，这意味着两者之间的任何互动性都会丧失。

为了解决这个问题，我们将使用另一种可能的语法，将<input>元素嵌套在<label>中：

<label>
    <input type="checkbox" />
    <span>Toggle checkbox</span>
</label>

2.3.3 Outlook 的条件注释

正如人们所期望的那样，Windows上的Outlook不支持上面的任何一个表单选项。它坚持要把表单元素转化为纯文本。所以我们之前的例子在Windows上的Outlook中会显示为[] Toggle checkbox，如下图所示。

为了防止这种情况，我建议用!mso条件注释来包裹<input>元素，以便从Outlook中完全隐藏复选框：

<label>
    <!--[if !mso]><!-->
    <input type="checkbox" />
    <!--<![endif]-->
    <span>Toggle checkbox</span>
</label>

2.3.4 在其他电子邮件客户端中隐藏复选框

由于我们不希望复选框是可见的，我们将默认隐藏它。 display:none是一个好的起点。(这使得我们的复选框对于键盘导航或屏幕阅读器是隐藏的，这可能是值得考虑的可访问性）。

<label>
    <!--[if !mso]><!-->
    <input type="checkbox" style="display:none;" />
    <!--<![endif]-->
    <span>Toggle checkbox</span>
</label>

这在大多数电子邮件客户端中都是有效的。但有少数电子邮件客户端（如法国SFR和La Poste的网络邮件客户端）将<input>元素转换为<noinput>。推测他们这样做是为了安全的解析出表单元素。但<noinput>不是真正的 HTML 元素。在HTML中，如果你使用这样的虚构元素，它的行为将类似于<div>。但是由于我们的<noinput>元素没有匹配的结束标记，它将作为一个包装器来包装我们原始复选框的所有同级内容。因为我们在它上面设置了display:none，所有这些同级别的内容也会被隐藏。

解决此问题的一种方法是在前面的display:none 之后使用 display:contents 声明。如果电子邮件客户端支持 display:contents，它就会像<input>（或<noinput>）元素一开始就不存在一样。否则，它将应用display:none并简单地隐藏复选框：

<label>
    <!--[if !mso]><!-->
    <input type="checkbox" style="display:none; display:contents;" />
    <!--<![endif]-->
    <span>Toggle checkbox</span>
</label>

但是等等! 我们还没有完成! 最后的补充现在破坏了我们之前在德国网络邮件客户端T-Online的工作代码。T-Online不支持display:contents。而且它还删除了任何重复的CSS属性声明，所以我们的display:none回退不再存在了。我们如何解决这个问题呢？我们要动手添加第二个样式属性，这次只有 display:none 声明：

<label>
    <!--[if !mso]><!-->
    <input type="checkbox" style="display:none; display:contents;" style="display:none;" />
    <!--<![endif]-->
    <span>Toggle checkbox</span>
</label>

一个标准的渲染引擎只会保留一个重复的HTML属性的第一次出现。但T-Online的解析器会保留最后一个。

这是一个很好的例子，说明HTML电子邮件的编码往往是一个打地鼠的游戏，在一个客户端修复一个错误，就会在另一个客户端产生新的错误。有时，我们需要使用肮脏的黑客手段，以便多走一步，多支持几个电子邮件客户端。

2.3.5 使用 ~ 通用同级组合器

为了实现我们的小型交互式切换组件，我们需要一个HTML元素用于切换按钮，另一个用于我们想要隐藏或显示的实际内容。我们的HTML的一个基本版本看起来是这样的：

<label class="email-toggle">
    <!--[if !mso]><!-->
    <input type="checkbox" style="display:none; display:contents;" style="display:none;" />
    <!--<![endif]-->
    <div class="email-toggle-button">
        View more details
    </div>
    <label class="email-toggle-content">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. […]
    </label>
</label>

为.email-toggle-content元素使用一个嵌套的<label>是一个很好的技巧，允许在内容里面点击而不关闭折叠面板（accordion）。

为了将.email-toggle-content的内容从复选框中定位出来，我们使用CSS中的tilde (~)一般兄弟姐妹组合器。

.email-toggle input:checked ~ .email-toggle-content {
    display: block;
}

由于电子邮件中的交互性需要支持嵌入样式（在＜style＞元素中），因此我们默认将按钮隐藏在内联样式属性中，并返回到在＜style＞元素中显示。我们可以对切换内容应用相同的逻辑（默认情况下让其可见，仅通过＜style＞元素隐藏）：

<style data-embed>
.email-toggle-button {
    display: block !important;
}
.email-toggle-content {
    display: none;
}
</style>

＜style＞标记上的数据嵌入属性用于确保在使用CSS内联时不会内联这些样式。