

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功能支持的细粒度测试.
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? - Overview of support for all features involved in the core technology behind Progressive Web Apps.
Is PWA ready? -渐进式Web应用程序对流行的全球和许多中文浏览器支持的核心和相关技术的支持概述.
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.

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 -审核和衡量渐进式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 -内懒加载图片