随着必须支持的浏览情况和平台的种类越来越多，渐进式增强的概念已经成为讨论的热门话题。简单地说，渐进式增强是一种建立有坚实基础的网站的技术，这样它就可以在广泛的浏览环境中访问——从移动设备和上网本，到桌面和屏幕阅读器。
什么是渐进式增强?
从最简单的概念上讲，渐进增强就是HTML、CSS和JavaScript的分离。就这样,真的。
如果您必须记住关于渐进式增强的一件事，那应该是这一点。可以把这些web技术看作是分层的，HTML是第一层，CSS是第二层，JavaScript(以及其他处理站点交互性的客户端技术，如Flash或Java applet)是第三层。
通过对这些网站组件进行划分，我们可以更容易地让我们的网站根据web浏览器的功能进行增强。
我们如何实际地进行渐进式改进?
- 标记:从语义和结构良好的HTML开始，以获得灵活性和互操作性。
- 样式:通过添加对具有更大功能的浏览器的支持(例如WebKit浏览器，IE9、Firefox和移动浏览器)。
- 行为:通过JavaScript在web浏览器上提供丰富的交互式功能来增强站点。
应用渐进式增强技术的好处
您应该记住，实用地实现标记、样式和行为层的分离将为您的站点项目带来许多好处。以下是采用渐进式改善的主要原因:
- 可访问性:所有访问者都可以访问内容。
- 可移植性:跨浏览器和跨设备支持。
- 模块化:具有智能边界的解耦组件使站点构建更容易，容错能力更强。
- 网站性能:(可感知的)页面加载时间方面的改进(影响可用性)更容易实现。
让我们每一个都多谈一点。
可访问性
网站的可访问性是这三层分离的最重要原因之一。可以肯定的是，所有的浏览器和设备至少都能够呈现最重要的部分:内容。想想现代的浏览器、古老的浏览器、移动设备、搜索引擎爬虫和屏幕阅读器——至少，渐进式增强对层分离、通用设计和语义标记的强调使它们都能够访问内容。
这意味着，例如，如果有任何隐藏的内容是通过JavaScript监听用户事件(例如鼠标单击按钮元素)，即使在JavaScript不可用的情况下，它仍然必须是可访问的。你希望这些内容是可访问的，这样谷歌的网络蜘蛛可以索引它，盲人可以用他们的屏幕阅读软件阅读它。通过编写良好的HTML、CSS和JavaScript，确保所有内容都在可触及的范围内，这将产生巨大而广泛的好处。
可移植性
渐进式增强并不适用于特定的网络浏览器;它试图尽可能地迎合所有浏览器，如果有浏览器特性，就利用它们。支持的智能手机和移动设备媒体查询， CSS3和HTML5，在渐进增强原则下，将有一个增强的用户体验，因为这些浏览器功能。通过适当的技术，这些增强不会疏远那些没有这些浏览器功能的人。
模块化
当将站点构建划分为不同的层时，开发人员可以更好地专注于他们的特定工作。在大型项目中，不同的开发人员在不同的层和/或模块中有他们的主要任务是非常常见的，例如，一个负责前端web开发，另一个可能专注于web设计，另一个处理服务器端脚本。图层分离也使网站更容易维护。
如果需要在表示层中制作补丁，那么您可以这样做，而不必处理标记和行为层。
网站性能
增加web页面的性能是应用渐进增强原则的剩余收益。渐进式增强有什么帮助页面加载时间？有人可能会说，把所有的内容、样式和脚本放在一个HTML文档中是最快的，因为它只需要一个HTTP请求，而不是(至少)三个。
虽然这是正确的，但它只适用于第一个未启动的浏览器缓存请求。后续的请求将大大受益于浏览器缓存:当他们导航到不同的网页时，外部链接的CSS和JavaScript文件仍然在客户端可用;只需要下载和呈现新的内容和页面资产。这就减少了通过网络传输的数据，从而加快了响应时间。
将层分开通常也会产生更好的性能。当在HTML文档中正确的时刻加载和执行样式表和脚本时，您可以优化呈现顺序，从而使web页面感觉响应更快。例如，用户应该首先看到(样式化的)内容。
在HTML文档中过早地放置脚本将会阻塞下面内容的呈现，直到脚本被加载。通过将JavaScript层与CSS和HTML层分离，我们可以更容易地选择加载脚本的位置;例如，我们可以在下载样式表之后加载它。
循序渐进发展的一般原则
我们如何在网站建设中应用渐进增强的概念?让我们看看这三个层，看看我们可以做些什么来促进其中的渐进增强。
标记
大约20年前，当人们需要一种基于互联网的文档标准时，HTML被发明了。即使是在web快速变化的本质下，HTML仍然是网站的基本内容结构机制。我们现在很幸运，已经达到了激动人心的时刻HTML5(以及支持它的网络浏览器)，使我们能够访问前所未有的语义和互操作标记，使我们的内容更易于机器阅读。
然而，尽管这种语言多年来经历了改进和修订，其主要目的仍然是相同的:我们使用HTML标记来构造内容，并使用超链接链接到其他(HTML)文档。渐进式增强最充分地接受了这一原则——它告诉您在语义上标记您的内容，并确保所有内容都可以通过正常方式访问超链接．例如，当JavaScript(和CSS)在用户代理上不可用时，远程加载的内容(通过Ajax)必须仍然可以访问——使用适当的技术，只需稍加努力，这是可能的(也是最佳实践)。
样式
视觉设计是强大的。在网络上，我们有CSS、图片和字体，通过允许我们自定义网站的外观来帮助增强我们的信息。与HTML5结合的是CSS3-让设计师有更多的机会和自由，在他们创作的网页设计中表达自己的风格。
为了将我们的视觉设计转化为网络媒介，我们使用样式表。样式表是从HTML文档中链接的，浏览器会呈现我们在其中定义的规则。将网站分成三层意味着我们的网页设计必须是可访问和可用的，无论用户使用什么浏览器。
如果用户正在使用IE6例如，他们不能被禁止访问网站的内容，即使该网站在支持css3的浏览器上增强了用户体验和视觉复杂性。逐步增强站点的样式也意味着依赖CSS来渲染内容(这是标记层的工作)内容例如，除非内容对理解HTML文档不是至关重要的，否则使用CSS属性就不是一个好的实践。
行为
在web的早期，HTML文档并不比普通的纸质文档更具动态性。事实上，HTML的最初目的是标记科学论文文档，并使它们相互链接，以便于引用和研究。大约在1996年，JavaScript进入了人们的视野。
从那时起，直到最近，脚本通常被设置为文档操作、表单输入验证和一些视觉效果，比如鼠标移至按钮和图像上的状态(在所谓的DHTML期)。尽管JavaScript为以前的静态HTML文档增加了复杂性和交互性，但通常JavaScript的使用往好了说是肤浅的，往坏了说是滥用的(弹出窗口、禁用用户输入，如右键单击，等等)。当以用户为中心的设计和“Web 2.0”实现时，丰富的互联网应用程序进入了这个领域，JavaScript，曾经被认为是网站中可有可无的一部分，现在成为了一个关键组件。
需要一些结构和最佳实践来开发和维护功能强大和高度交互的web应用程序和网站的可用性和可访问性。更好地理解语言的原型本质(和面向对象的使用)以及大量库和框架的兴起，例如jQueryMooTools最终以标准化的方式改进了JavaScript的实现，促进(甚至间接地强加)JavaScript和渐进增强最佳实践。对所有使用JavaScript的web开发人员来说，了解这种语言(及其怪癖)并使用正确的工具是必不可少的。
尽管在不使用JavaScript的情况下创建复杂的应用程序越来越困难，但web可访问性实践对web应用程序的影响越来越大wai - aria指南是朝着正确方向迈出的一步。对于强调渐进式增强的高效、健壮的web开发，我绝对推荐遵循以下准则:
- 将所有脚本放在外部链接的文件中
- 开发低调的JavaScript
- 将行为从HTML和CSS中分离出来
- 避免特定于浏览器的代码和使用特征检测(不是浏览器检测)
- 在“JavaScript关闭”的单元测试中测试你的web应用程序，并确定没有JavaScript不能做什么，这样你就可以提供替代选项
优雅退化vs.渐进增强
优雅降级是一个较老的概念，是网页设计中渐进式增强的前身。优雅降级强调容错，更面向浏览器，而不是面向可访问性，允许网站在使用旧的浏览器时降级。渐进式增强的不同之处在于其理念几乎是相反的:你通过利用用户浏览器内检测到的功能来增强网站，而不是针对最低公约数进行开发。
另一方面，渐进增强的理念是，我们向用户代理提供他们能够处理的内容。例如，我们将让支持CSS3的web浏览器(如border - radius: 4 px;)将样式规则应用于我们的网页。
渐进增强:现实世界中的问题
当您试图在站点构建中应用渐进增强原则时，您可能会遇到以下几个渐进增强的重要问题。
Web应用程序/富互联网应用程序将需要客户端脚本
在这个我们在浏览器中看到的东西模仿桌面应用的功能和健壮性的时代，如果我们想要提供丰富和响应性的体验，行为层是一个不能被剥夺的需求。这里要记住的关键一点是，您应该意识到没有JavaScript(或Flash或Java applet或任何您正在开发的行为web技术)的用户代理的含义，这样您就可以相应地对这些不太理想的情况做出响应。渐进式增强利用浏览器的特性，为具有特定浏览器特性的用户提供增强的体验。
在这种哲学的极端解释中，不能够呈现JavaScript的浏览器不会有像那些能够呈现JavaScript的浏览器那样丰富的体验。
37Signal的Basecamp项目管理web应用程序在关闭JavaScript时显示一个屏幕阅读器可访问的消息。
渐进式增强需要更多的开发工作
实际上，在创建渐进式增强的网站时，你会发现自己不得不做更多的工作。无论是学习(就像你现在所做的)，还是修改标记的语义和灵活性，或者编写额外的CSS来利用支持CSS3和HTML5的浏览器，渐进式增强比通常需要更多的web开发时间。
结论
渐进增强是创建普遍可访问的网站和web应用程序的强大开发理念。这确实需要一些学习、经验和纪律，但投资回报很高。
关于渐进式增强的额外阅读
- 逐步增强:为未来的网页设计铺平道路
- 理解渐进增强
- 使用CSS逐步增强功能
- 使用JavaScript逐步增强
- 用于渐进增强的不显眼的JavaScript
