电子邮件比网络早10年左右（取决于您与谁交谈），在那时，网络已经发展成为一个动态的交互式实体。但是，这些天您可能会在电子邮件中看到的最令人兴奋的东西是精美的gif动画，我们得到了90年代的那些。
现在一切都在变化，这是交互式电子邮件的曙光。如果可以在电子邮件，选项卡式布局或多页布局中使用图像库，该怎么办？如果您可以玩游戏，阅读实时Twitter提要，甚至购物，选择/编辑项目并直接在电子邮件中结帐，该怎么办？
电子邮件客户端是否已经开始支持JavaScript？不会。这不是扩展程序，插件下载，甚至不是新应用。这就是HTML和CSS！而且主要是CSS2！
打孔卡编码
那么，如何在不使用JavaScript的情况下检测用户交互并创建复杂的功能呢？我创建了一种称为打孔卡编码的技术。这基本上使用了大量的单选按钮，并根据这些按钮的：checked值设置CSS样式。一个简单的示例是选项卡式布局：
的HTML
<input type="radio" name="tabs" id="tab1" checked> <input type="radio" name="tabs" id="tab2"> <input type="radio" name="tabs" id="tab3"> <input type="radio" name="tabs" id="tab4"> <label for="tab1">Tab 1</label> <label for="tab2">Tab 2</label> <label for="tab3">Tab 3</label> <label for="tab4">Tab 4</label> <div class="tab tab1">Content for tab 1</div> <div class="tab tab2">Content for tab 2</div> <div class="tab tab3">Content for tab 3</div> <div class="tab tab4">Content for tab 4</div> 的CSS
input { display:none; } label { display:block; float:left; width:148px; border:1px solid #ccc; text-align:center; padding:1em 0; } .tab{ width:598px; height:1em; padding:2em 0; border:1px solid #ccc; text-align:center; display:none; clear:both; } #tab1:checked ~ .tab1, #tab2:checked ~ .tab2, #tab3:checked ~ .tab3, #tab4:checked ~ .tab4 { display:block; }参见工作示例：http : //codepen.io/anon/pen/WQwagL
选中＃tab1的单选按钮后，将显示.tab1。未选中单选按钮时，它将恢复为默认值。因为这些单选按钮都在同一阵列中，所以一次只能检查一个，因此这将阻止一次显示多个选项卡。
这是一个非常适应的概念。将选项卡标签替换为缩略图图像，将内容替换为图像，您将获得一个简单的图库。或者，将选项卡移动到导航布局以创建伪造的多页布局。
修复我正在构建的电子邮件中的一些错误时，我将单选按钮设置为显示，并注意到与旧的IBM打孔单选按钮/打孔卡图像类似。一旦理解了这一点，它便使我得以扩展思路：它只是一系列检查值或默认值。
您可能会认为它是对/错，或一/零。潜力巨大。
电子邮件中的游戏
我的第一个实验是制作游戏。从理论上讲，玩家必须单击标签才能得分。选中后，它还会显示下一个单选按钮的标签，依此类推。
我还为上一个单选按钮添加了标签，因此您也可能会丢失积分。然后，为了使其成为游戏，我对标签进行了动画处理以使其移动，从而使它们更难打，并将其样式化为a鼠型游戏。
在此处玩游戏：http : //codepen.io/M_J_Robbins/full/jpCKH/
电子邮件中的购物车
下一个示例稍微复杂一些。该控件使用117个单选按钮和2个复选框来控制它。其中一些功能包括图像画廊，多页面布局，添加/删除项目，表单验证，在线总价，小计税，折扣和总价的动态价格计算。所有这些都仅以HTML和CSS构建。
这里的概念是当您单击“立即购买”时，它用作表单提交，并包含所有选中的单选按钮的详细信息。然后，将在不访问网站的情况下对选定的卡进行收费，并将选定的产品发送到选定的地址。
支持与限制
就像您在电子邮件中所期望的那样，对此有一些限制。首先，文件大小受到限制。如果电子邮件超过102kb，则会在Gmail，Yahoo和Outlook.com中进行裁剪。而且，它被标记为垃圾邮件的风险要高得多。
我应该注意，限制仅适用于您发送的HTML和CSS。下载的资源（例如图像和字体）不包括在其中。为了解决这个问题，我们将代码缩小并缩小；但这又会导致一些错误，因此请小心。
然后，在不同的电子邮件客户端，不同的设备，不同的操作系统和不同的浏览器上，存在着各种各样的呈现问题。为了简化所有这些操作，我们希望将所有电子邮件客户端分为静态，受限和交互式3个组。
静态客户端：Outlook（Windows），Outlook.com，Gmail应用
这些客户端剥离了功能CSS，因此电子邮件将仅退回到简单的静态布局。最终用户应该不会注意到这些交互式电子邮件与他们每天收到的普通电子邮件之间的任何区别。
受限客户： Gmail（网络邮件），Yahoo，AOL
这些客户端在CSS上有不同的限制。电子邮件客户端预处理程序会剥离或编辑一些更高级的内容。但它们仍然支持某些互动。
交互式客户端： Applemail，iOS，Android，邮箱
这些都有完整的铃铛和口哨声。他们支持上面的所有内容，以及我正在研究的一些非常酷的新想法。好消息是，根据emailclientmarketshare.com的统计数据，在8月份打开的10.5亿封电子邮件中，有57％的电子邮件是在交互式客户端中打开的，还有20％在有限的客户端中打开了。
因此，有77％的用户能够看到一定程度的交互式电子邮件。
那么未来会怎样呢？
如您所见，电子邮件比静态文本和图像具有更多的潜力。我们已经看到如Nest和B＆Q这样的公司在其电子邮件中使用图库，而Litmus进行了大量的实验（例如视频背景，实时Twitter提要和“发现金票”赠品的实验）。
杭州网站建设一封非常激动人心的电子邮件时间，我们仅受想象力和Outlook深度的限制。展望仍然是一件痛苦的事情……需要时间。您可以想象，与常规电子邮件相比，这些邮件的构建时间要长得多。
我们仅受限于我们的想象力，较旧的电子邮件客户端的租用以及构建电子邮件所花费的时间。
