什么是渐进增强？

Question

24

在谈论使用 JQuery 写 stackoverflow 时，Jeff 提到了“渐进增强”的概念。

通过 Google 快速搜索，我发现有一些关于这个概念的高层次讨论。

有没有人能够推荐一个作为程序员入门的好地方。

具体而言，我一直在用 PHP 编写 Web 应用程序，并希望使用 YUI 来改善我的页面，但是很多页面看起来都需要使用 JavaScript 来完成大部分功能。对我来说，这似乎有点过度了，因为如果没有启用 JavaScript，则可能会破坏网站的大部分功能。

有没有一些好的学习资源可以帮助我使用这个想法，语言不限。

理想情况下，我希望先创建静态 HTML，然后再添加 YUI（或其他 Ajax 框架）以获得更丰富的客户端体验，请问如何实现呢？

- kaybenleroll

链接到同一篇博客文章：http://www.neerajkumar.net/blog/2012/08/19/progressive-enhancement/ 渐进增强 - Neeraj

7个回答

10

请参阅不侵入式JavaScript，这是渐进增强的基石。

- sparkes

那个链接很棒。出于某种原因，我没有想到去维基百科上查找。 :) - kaybenleroll

3

从另一个方向进行处理有时被称为优雅降级。通常情况下，当网站首先采用各种技术提供的增强功能构建后，需要进行修改以使得在没有这些技术的浏览器上能够优雅降级。

当设计与旧版浏览器（在互联网术语中被称为“古老版”），如IE 5.5、Netscape等兼容时，也是优雅降级。

在我看来，优雅降级应用程序需要付出更多的工作量。渐进式增强往往更加高效；然而，有时需要将现有应用程序变得适用于这些缺乏环境的情况。

- palehorse

3

基本上，如果您的网站在关闭JavaScript的情况下仍然可以正常工作，那么使用JavaScript添加的任何内容都可以被视为渐进增强。

有些人可能认为这是不必要的，但是许多人使用像NoScript这样的插件进行浏览（或者在浏览器设置中直接关闭JavaScript）。此外，许多移动Web浏览器可能支持或不支持JavaScript。因此，始终建议完全测试您的网站是否具有JavaScript和无JavaScript两种情况下的功能。

- EndangeredMassa

3

渐进增强（Progressive Enhancement）是一种开发技术，该技术强调语义化HTML的重要性。首先测试浏览器的能力，然后为可以使用这些增强功能的浏览器条件性地“叠加”JavaScript和/或CSS增强功能。

其中一个关键是理解我们正在测试浏览器的能力，而不是浏览器的嗅探。 Modernizr 是一个非常流行的浏览器能力测试套件。

渐进增强本质上是（第508节）可访问的；它提供了符合法律要求和规则精神的方法。

Filament Group 编写了关于此主题的优秀书籍《Designing With Progressive Enhancement》。（虽然我与 Filament Group 没有任何联系，但他们非常聪明，我希望我与他们有联系。）

- Jeromy French

2

渐进增强：

- Xeoncross

2

这是一个非常重要的概念，但很遗憾很少有网站开发人员理解它。

基本上，首先使用纯HTML构建站点/框架——结构元素、链接和表单。然后添加一些样式和闪亮的东西（如Ajax等）。

这并不是很难。就像palehorse所说的，优雅降级需要更多的工作。

网站应该在任何用户代理中正常工作，不必看起来相同（甚至听起来也不用，如果您的视力受损），只需工作即可。

- zobier

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- GateKiller · Accepted Answer

正如您所说的

在我看来，这似乎有点过度处理，因为没有启用JavaScript时，浏览站点可能会破坏大部分内容。

这不是渐进增强。渐进增强是指网站在没有JavaScript或CSS的情况下完美运行，然后再添加（层叠）这些额外的技术/代码，以增加网站的可用性和功能。

我可以给出的最好例子是此网站上的标签输入框。关闭JavaScript后，它仍将起作用，允许您输入用空格分隔的标签。打开JavaScript后，您会得到一个带有以前输入建议的下拉列表。

这就是渐进增强。