网页技术的兴衰与演进

我向刚成为父母的朋友和家人提供一条建议：当你开始觉得已经掌握了一切时，一切都会改变。就在你开始掌握喂养、尿布和规律小睡时，就该转向固体食物、如厕训练和整夜睡眠了。当你掌握了这些，又该上幼儿园和减少小睡了。这个循环周而复始。

如今从事设计和开发的我们也是如此。我在网页领域工作了近三十年，见证了思想、技巧和技术的定期兴衰。每次我们开发者和设计师进入稳定节奏时，总会有新的思想或技术出现，颠覆一切，重塑我们的世界。

我们如何走到今天

我在90年代中期建立了第一个网站。那时的网页设计和开发是一片自由天地，几乎没有既定规范。除了单列布局，我们使用表格元素，通常用空单元格包含单个像素间隔GIF来添加空白。我们用大量字体标签来设置文本样式，每次想要改变字体样式时都要嵌套标签。我们只有三四种字体可选：Arial、Courier或Times New Roman。当Verdana和Georgia在1996年出现时，我们欢呼雀跃，因为选择几乎翻倍。唯一安全的颜色是216种"网页安全"色，已知可在各平台工作。少数交互元素（如联系表单、留言簿和计数器）大多由CGI脚本驱动（当时主要用Perl编写）。实现任何独特外观都需要一堆层层嵌套的黑客技巧。交互通常仅限于网站的特定页面。

网页标准的诞生

在世纪之交，一个新的周期开始了。充斥着表格布局和字体标签的粗糙代码逐渐衰落，推动网页标准的运动兴起。CSS等较新技术得到浏览器制造商、开发者和设计师更广泛的采用。这种向标准的转变并非偶然或一夜之间发生。它需要W3C和浏览器供应商之间的积极互动，以及像网页标准项目（Web Standards Project）这样的人们的大力推广。A List Apart和Jeffrey Zeldman的《用网页标准设计》等书籍在教导开发者和设计师为什么标准重要、如何实施以及如何向组织推销方面发挥了关键作用。渐进增强等方法引入了内容应对所有浏览器可用——对更先进的浏览器提供额外增强的理念。同时，CSS禅意花园等网站展示了当与坚实的语义HTML结构结合时，CSS有多么强大和多功能。

像PHP、Java和.NET这样的服务器端语言取代Perl成为主导的后端处理器，cgi-bin被扔进了垃圾箱。随着这些更好的服务器端工具的出现，网页应用的第一时代开始了，从内容管理系统开始（特别是在博客领域，如Blogger、Grey Matter、Movable Type和WordPress等工具）。在2000年代中期，AJAX为前端和后端之间的异步交互打开了大门。突然之间，页面可以在不需要重新加载的情况下更新内容。一批JavaScript框架如Prototype、YUI和jQuery兴起，帮助开发者在标准支持水平参差不齐的浏览器之间构建更可靠的客户端交互。图像替换等技术让狡猾的设计师和开发者显示他们选择的字体。而Flash等技术使得添加动画、游戏甚至更多交互成为可能。

这些新技术、标准和技术在许多方面重振了行业。随着设计师和开发者探索更多样化的风格和布局，网页设计蓬勃发展。但我们仍然依赖大量黑科技。早期的CSS在基本布局和文本样式方面比基于表格的布局有了巨大改进，但当时的局限性意味着设计师和开发者仍然严重依赖图像来实现复杂形状（如圆角或斜角）和用于全长列外观的平铺背景（以及其他黑科技）。复杂的布局需要各种嵌套浮动或绝对定位（或两者兼有）。用于自定义字体的Flash和图像替换是从五大字体中变化字体的良好开端，但两种黑科技都引入了可访问性和性能问题。JavaScript库让任何人都可以轻松为页面添加一点交互，尽管代价是简单网站的下载大小翻倍甚至四倍。

网页作为软件平台

前端和后端之间的共生关系持续改善，导致了现代网页应用的当前时代。在扩展的服务器端编程语言（不断增长，包括Ruby、Python、Go等）和较新的前端工具（如React、Vue和Angular）之间，我们可以在网页上构建功能齐全的软件。伴随这些工具而来的还有其他工具，包括协作版本控制、构建自动化和共享包库。曾经主要是链接文档的环境变成了无限可能的领域。

同时，移动设备变得更强大，让我们可以随时随地访问互联网。移动应用和响应式设计为随时随地的新交互打开了机会。

强大的移动设备和强大的开发工具的结合促进了社交媒体和其他集中式工具的兴起，供人们连接和消费。随着在Twitter、Facebook甚至Slack上直接与他人联系变得更容易和更常见，对托管个人网站的需求减弱了。社交媒体提供了全球规模的连接，既有好处也有坏处。

想要更广泛的历史，以及关于如何改进的其他观点？Jeremy Keith写了《时间与网页》。或者查看网页设计博物馆的"网页设计历史时间线"。Neal Agarwal还有一个有趣的"互联网文物"之旅。

我们现在的位置

在过去的几年里，感觉我们已经开始达到另一个重要的转折点。随着社交媒体平台分裂和衰落，人们对再次拥有自己的内容产生了越来越大的兴趣。有许多不同的方式可以制作网站，从托管纯HTML文件的经典可靠方法到静态网站生成器，再到各种风味的内容管理系统。社交媒体的分裂也带来了成本：我们失去了发现和连接的关键基础设施。Webmentions、RSS、ActivityPub和IndieWeb的其他工具可以有所帮助，但它们仍然相对未充分实施，对不太极客的人来说难以使用。我们可以构建惊人的个人网站并定期添加内容，但如果没有发现和连接，有时感觉就像在虚空中呐喊。

浏览器对CSS、JavaScript和Web组件等其他标准的支持加速了，特别是通过Interop等努力。新技术在比以前短得多的时间内获得全面支持。我经常了解一个新功能并检查其浏览器支持，结果发现其覆盖率已经超过80%。如今，使用较新技术的障碍通常不是浏览器支持，而仅仅是设计师和开发者学习可用内容及如何采用的速度限制。

今天，通过几个命令和几行代码，我们可以原型化几乎任何想法。我们现在拥有的所有工具使得开始新事物比以往任何时候都更容易。但这些框架在初始交付中可能节省的前期成本最终会到期，因为升级和维护它们成为我们技术债务的一部分。

如果我们依赖第三方框架，采用新标准有时可能需要更长时间，因为我们可能必须等待这些框架采用这些标准。这些曾经让我们更快采用新技术的框架现在反而成了障碍。这些相同的框架通常也带来性能成本，迫使用户在阅读或与页面交互之前等待脚本加载。当脚本失败时（无论是由于代码不良、网络问题还是其他环境因素），通常没有替代方案，让用户面对空白或损坏的页面。

我们从这里去哪里？

今天的黑科技有助于塑造明天的标准。暂时拥抱黑科技以推动现在前进并没有本质上的错误。只有当我们不愿意承认它们是黑科技或我们犹豫是否替换它们时，问题才会出现。那么，我们可以做些什么来创造我们想要的网页未来呢？

为长远而构建。为性能、可访问性和用户优化。权衡那些对开发者友好的工具的成本。它们可能让你今天的工作稍微轻松一些，但它们如何影响其他一切？对用户的成本是什么？对未来的开发者？对标准采用？有时便利可能是值得的。有时它只是你已经习惯的黑科技。有时它阻碍你获得更好的选择。

从标准开始。标准随着时间的推移不断演变，但浏览器在继续支持旧标准方面做得非常出色。第三方框架并不总是如此。即使用90年代最黑科技的HTML构建的网站今天仍然运行良好。使用框架构建的网站即使在仅仅几年后也不总是如此。

精心设计。无论你的技艺是代码、像素还是流程，都要考虑每个决策的影响。许多现代工具的便利性是以不总是理解导致其设计的底层决策和不总是考虑这些决策可能产生的影响为代价的。与其匆忙"快速行动，打破常规"，不如利用现代工具节省的时间更仔细地考虑和深思熟虑地设计。

不断学习。如果你一直在学习，你也在成长。有时可能很难确定什么值得学习，什么只是今天的黑科技。你可能最终专注于明年无关紧要的东西，即使你只专注于学习标准。（记得XHTML吗？）但不断学习在你大脑中打开新的连接，你某天学到的黑科技可能有助于在另一天启发不同的实验。

玩耍、实验和变得古怪！我们构建的这个网页是终极实验。它是历史上最大的人类努力，但我们每个人都可以在其中创建自己的小天地。勇敢尝试新事物。为思想构建一个游乐场。在你自己的疯狂科学实验室中进行愚蠢的实验。开始自己的小生意。从来没有一个更有力量的地方可以发挥创造力、承担风险和探索我们的能力。

分享和放大。当你实验、玩耍和学习时，分享对你有用的东西。在你自己的网站上写作，在你喜欢的社交媒体网站上发布，或在TikTok上大喊。为A List Apart写点东西！但也要花时间放大他人：找到新的声音，向他们学习，并分享他们教给你的东西。

前进与创造

作为网页（及超越）的设计者和开发者，我们每天都有责任构建未来，无论是个人网站、被数十亿人使用的社交媒体工具，还是介于两者之间的任何东西。让我们将我们的价值观注入我们创造的事物中，让网页对每个人都变得更好。创造只有你独特资格制作的东西。然后分享它，改进它，重新制作，或制作新东西。学习。制作。分享。成长。冲洗并重复。每次你认为自己已经掌握了网页时，一切都会改变。