全世界有数百万人阅读它们。 它们被添加到垃圾邮件中，并被永久删除，但是没有它们，现代互联网是不可想象的。 许多前端开发人员会做任何事情来动手工作。 我的故事是关于电子邮件的，它们在过去20年中发生了怎样的变化，以及现代前端如何不会因排版而感到沮丧。 这是本系列的第一篇文章，我将在此讨论一切的开始。 在几周后，我们将讨论新闻通讯的开发和测试工具。
二十多年前，电子邮件是纯文本消息。 随着Internet和Web技术的发展，电子邮件在设计和技术实施方面都变得越来越复杂。 现在，它们看起来像完整的网站页面或登录页面。
WorldCast电子邮件客户端，2000年Gmail电子邮件客户端2018
我们使用相同的语言（HTML和CSS）来开发字母和网站。 html-letters的源代码中发生的一切与现代前端的开发环境中所看到的完全不同。 您甚至可能以为自己回到了中世纪的网络。 那些写信的人可能已经明白我的意思了。 其余的我只说一个字：html-tables。
历史：过去和现在，或者为什么一切如此糟糕
首先，让我们记住一切是如何开始的。
在90年代后期，出现了第一个html字母。 简单，只需最少使用HTML 4.01和CSS2的功能（CSS3的初稿将在几年后出现）。 在1996-1997年，第一个基于浏览器的电子邮件客户端开始出现。 支持html标记的免费Web客户端时代已经开始。
Hotmail界面1997
其中最受欢迎的是HotMail服务，在启动一年后，微软就购买了它。 顺便说一句，微软将不会在我们的历史中扮演最后的角色。 购买Hotmail之后，Microsoft将发布自己的桌面电子邮件客户端Outlook。 很快，他紧紧地占据了自己的位置。
自成立以来，对html字母的批评已不止一次。 主要的抱怨是：它们对用户不安全，长时间渲染，“消耗”用户Internet通道的带宽，并且看起来像新手Web设计师的怪异手工艺品。 这部分是正确的，但是随着时间的推移，所有这些问题都得到了解决：Internet连接的速度提高了，从根本上修改了电子邮件设计的外观，解决了电子邮件客户端开发人员方面的问题，尤其是安全性问题。 进步和常识赢得了。
1999年6月，Microsoft发布了Outlook 2000，在Outlook 2000中，它开始使用Internet Explorer引擎Trident渲染字母。
难以置信但真实请记住，使用了在安装Outlook时在用户系统上安装的IE版本-即使用户已将浏览器从版本6更新到版本7，电子邮件客户端仍将使用最初安装的第六个IE的引擎。
事实证明，新引擎并不是网站开发人员的最佳选择，它带来了大量错误，其中最著名的错误是连续几个电子邮件客户端版本“出故障”。 自动阻止所有图像和缺少替代文本，无法使用html表单功能，在发送之前破坏电子邮件预览只是Outlook 2000/2002 / XP / 2003问题的冰山一角。
在Outlook 2003中自动锁定图像
2007年1月，发布了来自Microsoft的电子邮件客户端的新版本。 此版本带来了Outlook历史上最严重的更改。 在新版本的Microsoft邮件程序中，他们从Internet Explorer引擎切换到其另一产品-MS Word的引擎。 主要通过“关心用户”和“提高电子邮件客户端的安全性”来解释这种需求。 实际上，这在CSS属性的支持上造成了严重损失，并创建了许多新的错误，从而使邮件列表的排字员和普通用户的生活变得复杂。
休斯顿，我们有问题切换到MS Word引擎后出现的Outlook错误：
- div和表格单元格中缺少背景图片支持，
- 缺乏CSS浮动和位置支持，
- 缺乏对文本阴影的支持，
- 填充和保证金支持薄弱
- CSS宽度和高度的支持较弱，
- 嵌套元素的背景颜色存在问题。
伟大而可怕的HTML表格
由于缺乏定位块和使用浮点的功能，以及由于空白和边距，邮件列表的开发人员面临着一项艰巨的任务：他们必须使电子邮件在上一代Microsoft的电子邮件客户端中以及在当前的电子邮件客户端中均能很好地显示。而不会破坏或忘记当时的其他流行邮件。
并找到了一个解决方案：html表。 听起来很简单，但是实际上，这等同于放弃使用HTML 4和CSS2的现代功能，而返回到过时的（甚至是那时）创建排版的方法。
里面的典型HTML电子邮件
使用html表不是唯一的限制：有必要不要忘记邮件程序中使用的预处理程序。 在Web客户端中，html字母在呈现之前要经历一个阶段，即从安全性和稳定性的角度对代码进行分析-预处理-结果是潜在的危险部分，例如javascript代码，嵌入式内容以及头部和样式标签内的所有内容以及其他一些内容。
随着时间的流逝，技术并没有停滞不前，HTML和CSS规范被新功能所淹没，但是Outlook以及当时世界上15％的电子邮件客户端（当时）仍然存在。 仅随着Outlook 2016的发布（仍使用MS Word的相同的旧式引擎），MS对其用户以及对新闻通讯的开发者的态度才开始改变。 Litmus公司以在各种电子邮件客户端中测试邮件的服务而闻名，已经与MS 建立了合作伙伴关系 。
Litmus开始帮助Outlook开发人员确定问题的优先级并加快其解决速度，并帮助该服务的用户-能够在此电子邮件客户端中免费检查其电子邮件。 这是有回报的，但并没有改变情况：在撰写本文时，MS的最新客户端是最近宣布的 Outlook2019。有趣的是：它增加了svg支持，并且Times New Roman字体不再是Web字体的后备。 但是它仍然使MS Word带有所有随之而来的问题。
布局与网站布局之间的差异
如今，Outlook以约10％的用户数量排名前三名（第一名-用于台式机/手机的Apple Mail，第二名-用于Web /手机的Gmail），但这仍然很多。 因此，很遗憾，我们还不能摆脱桌子。
幸运的是，Outlook引擎的功能现已为我们所熟知。 这为我们提供了多种工具，可以使使用字母的生活更轻松：条件注释和矢量标记语言。
有条件的评论
IE6-8时代的许多老人们都记得它是什么。
“条件注释”是IE引擎扩展机制，可让您选择IE的特定版本并应用我们需要的规则。 如果仅需要为Outlook 2000及更高版本添加某些样式，则可以编写：
另外，使用条件注释，您可以强制引擎仅针对特定版本的Outlook呈现某些标记块：
版本控制- Outlook 2000-版本9
- Outlook 2002-版本10
- Outlook 2003-版本11
- Outlook 2007-版本12
- Outlook 2010-版本14
- Outlook 2013-版本15
- Outlook 2016-版本16
通常，条件注释与另一个Outlook功能-VML结合使用。
矢量标记语言
矢量标记语言（VML）是MS于1998年开发的用于描述矢量图形的矢量标记语言。 后来，它成为了著名的SVG语言的基础语言之一。 自IE10发行以来，VML已被弃用，不再受支持或正在开发中。
矢量图形，不受支持的标记语言和html字母如何相关？ 很简单：在Outlook 2007/2010/2013/2016中，没有VML的背景图片是不可能的。 但是，学习这种新语言是完全可选的：您可以使用现成的在线工具来为您做所有的事情。
<body> <div style="background-color:#7bceeb;"> <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="top" align="left" background="https://i.imgur.com/YJOX1PC.png"> </td> </tr> </table> </div> </body>
las，这并不能消除由于有时在某些版本的Outlook中设置了背景布局而仍然需要在VML中自行选择的事实。
带来美丽
现代时事通讯为各种互动元素提供了场所。 例如，有人将Twitter feed直接集成到这封信中。 我将讨论更多实用和有用的内容：表格和滑块。
表格
emailmonks.com的作者描述了一种向电子邮件中添加工作表格的方法。 其机制如下：表单数据由php函数收集为URL属性； 然后将该属性存储在远程文档或数据表中； 稍后，该属性将从指定的来源请求并显示在页面上。
对此类表单的支持非常好：在Apple Mail，iOS Mail，Outlook，iOS / Android的Gmail和默认的Android电子邮件客户端中，它们都是开箱即用的。
滑杆
每个人都知道滑块是什么，很多人知道如何使用JS制作滑块。 但是，您可以使用纯CSS / HTML制作滑块，甚至可以使其在现代电子邮件客户端中正常运行（Windows的Outlook除外-您需要备用的滑块）。
此滑块的魔力是20行：
.slide1 { top: 10px; left: 321px;} .slide1-content {left: 0px;} .slide1:hover { background-color: #37B330;} #slide-1:checked ~ .slide1 {background-color: #37B330 !important;} #slide-1:checked + span + table .swoosh { left: 0px !important; } .slide2 { top: 66px; left: 321px; } .slide2-content { left: 600px; } .slide2:hover { background-color: #37B330;} #slide-2:checked ~ .slide2 {background-color: #37B330 !important;} #slide-2:checked + span + table .swoosh { left: -600px !important; } .slide3 { top: 122px; left: 321px; } .slide3-content { left: 1200px; } .slide3:hover { background-color: #37B330;} #slide-3:checked ~ .slide3 {background-color: #37B330 !important;} #slide-3:checked + span + table .swoosh { left: -1200px !important; }
实际上，这里没有什么神奇的东西-它只是嵌套的选择器，并且在更改切换幻灯片的元素的选中状态时，将带有图像的块移动到其高度。
其他互动
如您所见，使用这种方法，不仅可以制作滑块，还可以制作其他交互式元素，在这些元素中，用户需要按顺序选择多个状态。 例如，问卷。
可以在此处找到该选项的实现细节。
接下来是什么？
许多大型公司都在努力追赶这一进步，并将现代技术引入其中。 不久前，Google还决定帮助社区并纠正这种情况。 他们的AMP HTML Email项目将利用Google AMP的所有优势 ，并为我们提供使用滑块，灯箱，表格甚至某些内部逻辑的机会，而不会受到任何黑客攻击或复杂逻辑的影响。 但是，尽管该项目尚处于初期阶段，但所有这些超级按钮都仅在Gmail开发者预览版中可用。
梦想着美好的未来，我们将从天堂回到尘世。 在过去的十年中，html表已成为字母的组成部分。 尽管时事通讯的内部尚未进行大规模更改，但外部通讯变得更加有趣。 现在，我们已经达到了电子邮件客户端的发展阶段，当信件中的交互体验成为主要趋势时。 没错，写这样的信变得更加困难。 在下一篇文章中，我将讨论邮件的开发和测试工具。