

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 - 设置增强功能集合的阈值.
• [等级组件，而不是浏览器]（https://www.filamentgroup.com/lab/grade-the-components.html ） - 组件级功能测试和增强功能.
• Feature vs Browser vs Form factor detection - 作为将应用程序调整到其环境的不同策略.
• Server-side device detection - 使用用户代理和其他HTTP标头信息与设备数据库结合有条件地提供文件.
• Writing polyfills - 如果某些浏览器的基线仍然太高，请考虑 polyfills （又名 Regressive Enhancement).
• Application Shell Architecture - 即时加载Web应用程序的设置.

Feature Detection

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

• CSS feature queries (CSS.supports() & @supports()） - 使用JS方法或CSS声明本地测试是否支持特定的CSS功能.
• Feature Detect ES6 - 检测哪些ES2015功能可用.
• SVG requiredFeatures - 只有当[requiredFeatures]求值为true时才渲染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的细粒度测试功能支持您当前的浏览器.
• State of Web Type - 支持Web上的类型和印刷功能表.
• 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 - 探索功能，包括建议和填充物的链接.
• 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.
• Chrome Platform Status
• Edge Platform Status
• Firefox Platform Status
• Webkit Platform Status （苹果浏览器）
• MDN Compatibility tables - MDN的Web技术文档在每篇文章末尾都有一个浏览器兼容性表.
• MDN Browser Compat Data - npm模块为MDN兼容性表提供支持.
• Device Bugs & Quirks - Crowd sourced collection of weird HTML, CSS, and JS quirks in mobile devices, which you won't find in the other support tables.
• Can I Email? - 支持电子邮件中HTML和CSS的表格. 灵感来自 Can I use.

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 - 在不同的场景中运行自动浏览器测试. *使用不同浏览器连续运行自动化测试 BrowserStack, Saucelabs 或其他替代方案.
• Lighthouse - 审计和测试Progressive Web Apps的性能（通过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>标签. （注意：仅限常绿浏览器）

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

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