Based on HTML radio buttons, visually enhanced using CSS pseudo classes and elements.
Add page transitions with event hooks, cache and prefetch support.
From data table to themed charts using HTML5 canvas (article and library).
With custom focus, hover and checked state. Enhanced asynchronously.
Based on HTML radio buttons, visually enhanced using CSS pseudo classes and elements.
Article and library.
Accessible, custom slider widget based on a standard HTML select.
Add page transitions with support for multiple containers / content slots (requires jQuery).
Lazy load images inside `` tags. (note: Evergreen browsers only)
Similar tot jquery-pjax, but without the jQuery dependency.
List of links in footer enhanced to off-canvas menu.
Set of React form components which can be pre-rendered & handled server-side. They are enhanced client-side without losing state.
List of images enhanced into responsive carousel with various behaviour options.
Add page transitions with event hooks, cache and prefetch support. (requires jQuery).
From definition list to SVG illustration (article with demos).
Checkbox or radios, visually enhanced to sliding toggle switches using CSS only.
Add page transitions with event hooks and cache support. Has adapters to bind to native navigation controls on iOS and Android.
Conditionally load JS modules based on directives in HTML attributes.
(`CSS.supports()` & `@supports()`) - Natively test if specific CSS feature is supported using JS method or CSS declaration.
Lets you asynchronously load CSS & JS after a set pre-defined feature tests.
Detect which ES2015 features are available.
Lightweight feature detection suite.
Extensive feature detection suite (supports custom builds).
Render SVG elements only if their `[requiredFeatures]` evaluate to true.
Setup for instant loading web apps.
Set a threshold for collection of enhancements.
As different strategies to tune your app to its environment.
This sets the baseline for every device and browser.
Use user-agent and other HTTP header info combined with a device database to conditionally serve files.
Core functional experience enhanced after testing capabilities.
Provide wide access to content without technological restrictions.
If your baseline is still too high for some browsers, consider polyfills (aka Regressive Enhancement).
Compare accessibility support of HTML elements and ARIA roles across browsers & assistive technologies.
Lets you compare implementation of API specifications in major desktop browsers.
Support tables for HTML and CSS in emails. Inspired by Can I use.
Compare feature implementations and limitations across desktop & mobile browsers.
Fine-grained tests for CSS3 feature support of your current browser.
Crowd sourced collection of weird HTML, CSS, and JS quirks in mobile devices, which you won't find in the other support tables.
Compatibility tables for default local (system) fonts.
Compare feature support of HTML5 tags, input types and properties across major browsers.
Explore features with recommendations and links to polyfills.
Test and compare HTML5 feature support across browsers.
Compare which APIs are supported in Web Workers and Service Workers across browsers.
Figure out the browser support of combinations of features.
Support table for PWA features including service worker, manifest, background sync and push notifications (Unofficial, maintained by Maximiliano Firtman).
Overview of support for Houdini (low-level APIs exposing parts of the CSS rendering engine) across browsers.
Overview of support for the core and related technologies behind Progressive Web Apps for both popular global and many Chinese browsers.
Overview of support for all features involved in the core technology behind Progressive Web Apps.
Overview of support for the different browser features behind real time communication.
Overview of support of different browser features behind WebVR including display, gamepad, audio and speech APIs.
Overview of JavaScript feature support across browsers and other runtimes.
npm module powering the MDN Compatibility tables.
MDN's web technology documentation has a browser compatibility table end the end of each article.
Overview of JavaScript feature support across NodeJS versions.
Browser support status overview of web API's filling the "app gap".
Support tables for type and typographic features on the web.
Overview of browser technologies with links to docs and test suites.
ARIA roles and attributes support for different screen reader and browser combinations.
(Safari)
Lists and checks modern web APIs like access to device system, sensors and actuators.
Lets you manually test web pages in different versions of browsers on Windows and Android platforms.
Continuously run automated tests in different browsers using , or other alternatives.
Run automated browser tests in different scenarios.
Chrome DevTools extension to toggle support of selected CSS features for testing progressive enhancement fallbacks.
Web page to see the pre-rendered source code of a page.
Audit and meassure performance of Progressive Web Apps (via cli or Chrome extension).
Lets you *test manually on actual devices* (for free).
, Checklist of 2nd edition (PDF) - Actionable list to check you've applied Progressive Enhancement best practices. Part of Adaptive Web Design book.
To test IE browsers on other platforms.
Continuously run automated tests in different browsers using , or other alternatives.
Download the app, emulate on desktop, setup to test local websites. (Opera Mini accounts for over 5% browser usage world wide)
Good way to test if your content is accessible at the baseline. Try Lynx for example.
Book on Progressive Enhancement from content to design and interaction.
The book* (400+ pages) on Progressive Enhancement.
Intro to different feature detection techniques with examples and demos.
Sharing content is the core of the web. Progressive Enhancement ensures access to content.
Enhancing web sites into native-like apps (progressive, not hybrid).
From the concept of enhancement to the criteria and rules for enriching the user interface.
Apply technologies in an intelligent way, layer-upon-layer, to craft an amazing experience.