Progressive Enhancement

Progressive Enhancement Resources Awesome

有关渐进增强的资源的全面收集. 从概念和策略到功能检测和测试方法. 完整列出(代码)示例.

The Concept

Progressive Enhancement 表示在验证目标环境(例如,浏览器)具备的能力后,逐渐改善其用户体验. 从内容开始,并确保您保持功能和可访问性.

Strategies

您可以采用不同的方式应用渐进增强:

Feature Detection

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

Support Tables

不同的环境(平台,浏览器,版本)具有不同的功能. 支持表告诉您每种环境具有哪些功能. 了解支持级别可以帮助您权衡一项增强与实现的工作量和影响.

Testing Methods

通过逐步增强,您可以在不同的环境中支持不同的体验. 这些是测试所有这些变体的方法:

Examples

Custom Form Elements

  • Fancy radio buttons -基于HTML单选按钮,使用CSS伪类和元素在视觉上进行了增强.
  • Checkboxes & radio buttons -具有自定义焦点,悬停和检查状态. 异步增强.
  • Toggle switch -复选框或单选按钮,在视觉上已增强为仅使用CSS的滑动拨动开关.
  • 5-star rating -基于HTML单选按钮,使用CSS伪类和元素在视觉上进行了增强.
  • jQuery slider -基于标准HTML选择的可访问的自定义滑块小部件.
  • jQuery custom file input -文章和图书馆.
  • React isomorphic form -一组可在服务器端预渲染和处理的React表单组件. 它们是增强的客户端,而不会丢失状态.

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 在法律允许的范围内,放弃在全球范围内根据版权法享有此作品的所有权利,包括所有相关和邻接权.

您可以复制,修改,分发和执行作品,甚至用于商业目的,而无需征得您的许可.