Progressive Enhancement

Progressive Enhancement Resources

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

The Concept

Progressive Enhancement 是指在验证目标环境（如浏览器）是否具备能力后，逐步提升用户体验. 从内容开始，确保您保持功能性和可访问性.

• The Role of Enhancement in Web Design - 从增强的概念到丰富用户界面的标准和规则.
• Understanding Progressive Enhancement - 以智能方式逐层应用技术，打造令人惊叹的体验.
• Designing with Progressive Enhancement - 关于渐进增强的书（400 多页）.
• Detecting (HTML5) features - 通过示例和演示介绍不同的特征检测技术.
• Progressive Web Apps - 将网站增强为类似原生的应用程序（渐进式，而非混合式）.

Strategies

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

• Make the page usable with only HTML - 这为每个设备和浏览器设置了基准.
• Test Driven Progressive Enhancement - 测试能力后增强核心功能体验.
• Cut the mustard - 设置增强收集的阈值.
• 分级组件，而不是浏览器 - 组件级功能测试和增强.
• Feature vs Browser vs Form factor detection - 作为调整您的应用程序以适应其环境的不同策略.
• Server-side device detection - 使用用户代理和其他 HTTP 标头信息结合设备数据库来有条件地提供文件.
• Writing polyfills - 如果您的基线对于某些浏览器仍然太高，请考虑 polyfills （又名 Regressive Enhancement).
• Application Shell Architecture - 即时加载网络应用程序的设置.

Feature Detection

在尝试增强体验之前，您需要确保环境能够增强体验. 您通过执行特征检测来测试它：

• CSS feature queries (CSS.supports() & @supports()) - 使用 JS 方法或 CSS 声明原生测试是否支持特定的 CSS 功能.
• Feature Detect ES6 - 检测哪些 ES2015 功能可用.
• SVG requiredFeatures - 仅当 SVG 元素的“[requiredFeatures]”计算结果为真时才渲染 SVG 元素.
• Modernizr - 广泛的功能检测套件（支持自定义构建）.
• Feature.js - 轻量级特征检测套件.
• Conditioner.js - 根据 HTML 属性中的指令有条件地加载 JS 模块.
• EnhanceJS - 允许您在一组预定义的功能测试后异步加载 CSS 和 JS.

Support Tables

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

• The Web Platform - 带有文档和测试套件链接的浏览器技术概述.
• Can I use ...? - 比较桌面和移动浏览器的功能实现和限制.
• I want to use ... - 弄清楚浏览器对功能组合的支持.
• HTML5 Test - 测试和比较跨浏览器的 HTML5 功能支持.
• CSS3 Test - 对当前浏览器的 CSS3 功能支持进行细粒度测试.
• Accessibility Support - 比较跨浏览器和辅助技术对 HTML 元素和 ARIA 角色的可访问性支持.
• State of Web Type - 支持网络上的类型和排版功能表.
• Font Family Reunion - 默认本地（系统）字体的兼容性表.
• HTML5 Accessibility - 比较主流浏览器对 HTML5 标签、输入类型和属性的功能支持.
• WAI-ARIA Screen reader compatibility - ARIA 角色和属性支持不同的屏幕阅读器和浏览器组合.
• What web can do today - 列出并检查现代 Web API，例如对设备系统、传感器和执行器的访问.
• HTML5 Worker test - 比较跨浏览器的 Web Workers 和 Service Workers 支持哪些 API.
• HTML5 Please - 通过建议和 polyfill 链接探索功能.
• API Catalog - 让您比较主要桌面浏览器中 API 规范的实现.
• Kangax's ECMAScript compatibility table - 跨浏览器和其他运行时的 JavaScript 功能支持概述.
• Node compatibility table - 跨 NodeJS 版本的 JavaScript 功能支持概述.
• Is service worker ready? - 对 Progressive Web Apps 背后核心技术所涉及的所有功能的支持概述.
• Is PWA ready? - 对流行的全球浏览器和许多中国浏览器的 Progressive Web Apps 背后的核心和相关技术的支持概述.
• Is WebRTC ready yet? - 支持实时通信背后的不同浏览器功能的概述.
• Is WebVR ready? - 概述支持 WebVR 背后的不同浏览器功能，包括显示、游戏手柄、音频和语音 API.
• Is Houdini ready yet? - 跨浏览器对 Houdini（公开部分 CSS 渲染引擎的低级 API）的支持概述.
• Chrome Platform Status
• Edge Platform Status
• Firefox Platform Status
• Webkit Platform Status （苹果浏览器）
• MDN Compatibility tables - MDN 的网络技术文档在每篇文章的末尾都有一个浏览器兼容性表.
• MDN Browser Compat Data - 为 MDN 兼容性表提供支持的 npm 模块.
• Device Bugs & Quirks - 移动设备中奇怪的 HTML、CSS 和 JS 怪癖的众包集合，您在其他支持表中找不到.
• Can I Email? - 支持电子邮件中的 HTML 和 CSS 表格. 灵感来自 Can I use.
• Project Fugu API tracker - 浏览器支持 Web API 填补“应用程序空白”的状态概述.
• iOS PWA Compatibility - PWA 功能的支持表，包括服务工作者、清单、后台同步和推送通知（非官方，由 Maximiliano Firtman 维护）.

Testing Methods

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

• Open Device Lab - 让您在实际设备上手动测试（免费）.
• Testing in Opera Mini - 下载应用程序，在桌面上模拟，设置以测试本地网站. （Opera Mini 占全球浏览器使用量的 5% 以上）
• cURL - 网页查看页面的预渲染源代码.
• Browserling - 允许您在 Windows 和 Android 平台上的不同版本浏览器中手动测试网页.
• Run Internet Explorer using Virtual Machines - 在其他平台上测试 IE 浏览器.
• Device emulators and simulators
• Configure Desired Capabilities in Selenium - 在不同场景下运行自动浏览器测试.
• Continuously run automated tests in different browsers using BrowserStack, Saucelabs 或其他替代品.
• Lighthouse - 审计和衡量渐进式 Web 应用程序的性能（通过 cli 或 Chrome extension).
• Progressive Enhancement checklist (1^st edition, HTML), Checklist of 2^nd edition (PDF) - 用于检查您是否已应用渐进增强最佳实践的可操作列表. 部分 Adaptive Web Design book.
• CSS Feature Toggles - Chrome DevTools 扩展以切换对选定 CSS 功能的支持，以测试渐进式增强回退.

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

• Responsive Carousel - 图像列表增强为具有各种行为选项的响应轮播.
• Lazy Progressive Enhancement - 在内延迟加载图像<noscript>标签. （注意：仅限 Evergreen 浏览器）

Menus

• Progressive hamburger menu - 增强到非画布菜单的页脚中的链接列表.

Page Navigation

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

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

Related Articles

• Make the web work for everyone - 恳请开发人员考虑浏览器差异并构建弹性网络.
• How many people are missing out on JavaScript enhancement? - 研究为什么在 1.1% 的页面访问中没有加载 JavaScript.

---

License

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

您可以复制、修改、分发和执行作品，甚至可以用于商业目的，所有这些都无需征得许可.