建立网站的技巧非常复杂，包含许多快速变化的部分。 Web设计社区的目标是减少复杂性 ，并减少在创建过程的每个阶段出现错误的可能性 。
渐进式增强是Web设计中的一种想法，旨在减少错误并全面提供一致的用户体验 。 这个概念有其自己的Wikipedia页面 ，该页面将其解释为一种完全可访问的内容的方法，仅在浏览器支持时才呈现增强功能。
渐进式增强很容易理解，但将其直接应用于设计工作并不容易。 我想介绍一些在实际项目中逐步增强的最佳实践，以帮助设计人员更可持续地考虑其工作流程 。
1.了解渐进增强
渐进增强理论建议从一个简单的网站开始，该网站可在所有浏览器中正常工作，并使每个访问者都可以访问 。 然后尽可能添加功能。
这与优雅降级相反，后者默认情况下包括所有功能，然后在某些功能不起作用时降级。
渐进增强功能对于整体用户体验更好，因为它的核心仅加载必要的元素 。 每个网络浏览器都可以支持文本（通常是图像）。 没有任何CSS，此信息将显得乏味无味，但可以访问。
此List Apart文章认为，渐进式增强是内容优先的 ， 后来添加了样式和动态组件 。 语义HTML中的内容应首先交付。
我们今天使用的高级CSS和JavaScript得到了广泛支持，但是如果我们要遵循逐步增强的原则，则应将它们视为奢侈品。
这是渐进增强的主要功能的一般概要，您应考虑以下几点：
- 所有内容的语义标记
- 需要尊重用户的浏览器首选项
- 内容和基本功能应对所有用户可用
- 不引人注目JavaScript仅在可以支持 JavaScript的环境中加载
前端开发中的技术限制主要取决于浏览器的兼容性。 渐进式增强功能使您回到基本概念上，思考最简单的准系统网页的外观。 从那里，您可以计划更多高级功能 ，例如CSS3属性。
但是不支持现代CSS3的浏览器呢？ 这就是“ 我可以使用”之类的网站发挥作用的地方。 您应该确定哪些功能值得实施，并根据您网站的目标受众做出判断。
2.样式表中的生存
如今，大多数浏览器都支持您需要的所有基本属性。 但是高级CSS3仍然是遗留用户的问题 ，渐进增强功能提供了解决方案。
与其寻找保持这些新功能的后备方法，不如先考虑一下自己的布局结构 。
编写可在尽可能多的活动浏览器中工作的语义HTML和CSS标记 （无需支持IE5等古老的浏览器）。
以这个JSFiddle为例 ，它使用带有两个侧边栏（ .fixed ）和一个流体含量区域（ .fluid ）的.fluid 。 如果删除所有CSS，然后重新运行代码，您会发现所有内容都与第一列，第二列和最后一列很好地堆叠在一起。
一些开发人员希望在HTML中首先显示内容列（ .fluid ）。 这是渐进增强功能发挥作用的地方， 替代CSS解决方案也变得可行。
HTML的两个主要目标如下：
- 完整的语义和有效代码
- 所有人的一致体验
达到这些目标的最直接方法是从无到有 ， 努力工作，就像大多数渐进增强主义者所建议的那样。
在什么时候放弃对某事的支持也是值得考虑的。 微软已经放弃了对IE6的主要支持 ，因此运行该浏览器的用户可能不值得您花时间。
但是仍然存在一个大问题：如果浏览器不支持我的现代CSS，该怎么办？
您只需编写不使用它的代码 ，然后将现代CSS视为逐步的增强。 这就是渐进增强方法的优点。
您不需要回退，因为您基本上假设默认情况下不支持任何内容 。
渐进式增强方法是关于使站点即使在不支持某些内容的情况下也可以使用，但如果支持，那就更好了。
您需要考虑在没有CSS的情况下内容实际上如何流动 。 例如，当我在Transmit网站上禁用CSS时，内容仍会自然地向下流到页面。
是的，这很丑陋，是的，感觉就像我们已经失去了二十年的进步…… 但它确实有效 。
3.处理JavaScript
值得一提的是，您在开发过程中可能遇到的每个JavaScript问题都是棘手且独特的。 在构建具有渐进增强功能的新项目时，应列出所有必需的基于JS的功能，并考虑它们在没有JavaScript的情况下如何运行 。
这将需要大量的在线研究来找到有效的解决方案。 亚伦·古斯塔夫森（Aaron Gustafson）撰写了一篇出色的博客文章，其中提出了各种问题的解决方案，例如将ija中内容的元刷新替换为Ajax。
另外，在创建JavaScript标签时，最好将锚链接与真实ID值结合使用 。 这样，当禁用JavaScript时，您仍然可以通过定位值看到和访问选项卡。 Aaron在A List Apart上写了另一篇文章，其中涵盖了有关如何考虑这些问题的更一般的概述。
这是另一个例子。 假设您有一个动态加载内容的链接。 href值为空，因为所有内容均通过JavaScript使用preventDefault（）方法加载。
相反，明智的做法是将href属性设置为指向可以自然加载内容的其他页面 ，但是访问者仅在禁用JavaScript时才能看到该页面 。
渐进式增强功能远不止JavaScript ，但随着Web开发每年都在不断发展，毫无疑问JavaScript发挥了重要作用。
在一切都已禁用的假设下进行操作，然后从那里扩展 。 这可能包括无法控制的嵌入式窗口小部件问题，在这里， <noscript> tag是可行的解决方案。
还请考虑缺少全面的浏览器支持的 JavaScript功能。 这包括fetch API ， push API ， 箭头函数语法 ，甚至是不支持jQuery之类的现代库的浏览器。
每个功能都需要使用单独的解决方案进行单独的测试 。
逐步增强JavaScript的本质是构建无需任何脚本即可运行的内容 。 这可能会导致基本的用户体验，但是没关系，只要网站可用且内容可访问即可。
如果要进行实时测试，通常可以在每个主要的浏览器中禁用CSS和JavaScript，以查看网站的性能。 同样值得考虑使用扩展程序（如A-Tester）以符合WCAG 。
具有渐进增强功能JavaScript是一个巨大的话题。 以下是一些有助于您深入了解的帖子：
进步不足的地方
尽管渐进式增强对于几乎每种类型的现代网站都是一个绝妙的主意，但它可能根本不适用于旨在突破网络技术极限的项目 。
例如，对于仅在Ajax调用上起作用的Web应用程序，此方法不是一个好的解决方案。 这是可访问性的好选择吗？ 不，当然不是。 但是，如果真是那样，大多数Codrops的教程甚至都不存在。 您必须记住目标受众 。
商业网站可能没有那么多的观众关注那些新颖CSS3 透视图属性 ，但是Web开发人员可以成为此类高级功能的理想读者。
渐进增强仅对于根本不在乎时光倒退的 Web应用程序是不足的。 我意识到这些Web应用程序很少而且相差很远，但是开发人员喜欢进步，在某些情况下，随着新技术的发展而前进，将落后者抛在脑后是明智的。
我是一般Web项目的渐进增强（甚至可以选择降级）的支持者。 但我也意识到，这并不是解决所有问题的完美解决方案。 实际上，没有完美的解决方案。 一切都归结为观众的需求和项目目标。
进一步阅读
如果您一直在构建Web项目，则应考虑将渐进式增强应用于工作流程。 这比乍看起来要容易得多，而且一切都始于基本原理。 围绕渐进增强的大多数主题仅需要实践和测试。 尝试本文中的建议，并查看最适合您的工作流程的方法。
如果您想了解有关渐进增强的更多信息，请查看以下相关文章：
翻译自: https://www.hongkiat.com/blog/progressive-enhancements-web-design-best-practices/
7071
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
