Progressive Enhancement

Progressive Enhancement Resources Awesome

关于渐进增强的全面资源集合. 从概念和策略到特征检测和测试方法. 完成(代码)示例列表.

The Concept

Progressive Enhancement 意味着在验证目标环境(例如浏览器)能够实现之后逐渐改善用户体验. 从内容开始,确保您保持功能和可访问性.

Strategies

您可以通过不同方式应用渐进增强:

Feature Detection

在尝试增强体验之前,您需要确保环境能够增强. 您可以通过执行功能检测来测试它:

Support Tables

不同的环境(平台,浏览器,版本)具有不同的功能. 支持表告诉您每个环境具有哪些功能. 了解支持级别可以帮助您权衡增强与其实施的努力和影响.

Testing Methods

通过渐进增强,您可以支持不同环境中的不同体验 这些是测试所有这些变化的一些方法:

Examples

Custom Form Elements

Data Visualisations

  • Timeline - 从定义列表到SVG插图(带演示的文章).
  • Charts - 使用HTML5画布(文章和库)从数据表到主题图表.

Images

使用ajax和history.pushState在静态页面之间异步获取和转换:

  • Barba.js - 使用事件挂钩,缓存和预取支持添加页面转换.
  • SmoothState.js - 使用事件挂钩,缓存和预取支持添加页面转换. (需要jQuery).
  • MoOx/pjax - 类似于jquery-pjax,但没有jQuery依赖.
  • Turbolinks - 使用事件挂钩和缓存支持添加页面转换. 具有适配器以绑定到iOS和Android上的本机导航控件.

License

CC0

Jasper Moelker 在法律允许的范围内,根据版权法放弃全球范围内对本作品的所有权利,包括所有相关和邻接权利.

您可以复制,修改,分发和执行工作,即使是出于商业目的,也可以不经许可.