User Experience on mobile might not be great yet, but I'm working on it.

Your first time on this page? Allow me to give some explanations.

Awesome Progressive Enhancement

Resources on Progressive Enhancement. From concept and strategies to feature detection & testing methods. Complete with a list of (code) examples.

Here you can see meta information about this topic like the time we last updated this page, the original creator of the awesome list and a link to the original GitHub repository.

Last Update: Dec. 1, 2020, 3:10 a.m.

Thank you jbmoelker & contributors
View Topic on GitHub:
jbmoelker/progressive-enhancement-resources

Search for resources by name or description.
Simply type in what you are looking for and the results will be filtered on the fly.

Further filter the resources on this page by type (repository/other resource), number of stars on GitHub and time of last commit in months.

The Concept

Sharing content is the core of the web. Progressive Enhancement ensures access to content.

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.

The book* (400+ pages) on Progressive Enhancement.

Book on Progressive Enhancement from content to design and interaction.

Intro to different feature detection techniques with examples and demos.

Enhancing web sites into native-like apps (progressive, not hybrid).

Strategies

Provide wide access to content without technological restrictions.

This sets the baseline for every device and browser.

Core functional experience enhanced after testing capabilities.

Set a threshold for collection of enhancements.

As different strategies to tune your app to its environment.

Use user-agent and other HTTP header info combined with a device database to conditionally serve files.

If your baseline is still too high for some browsers, consider polyfills (aka Regressive Enhancement).

Feature Detection

CSS.supports()](https://developer.mozilla.org/en/docs/Web/API/CSS/supports) & [@supports()`](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports)) - Natively test if specific CSS feature is supported using JS method or CSS declaration.

Detect which ES2015 features are available.

Render SVG elements only if their [requiredFeatures] evaluate to true.

Extensive feature detection suite (supports custom builds).

Lightweight feature detection suite.

Conditionally load JS modules based on directives in HTML attributes.

Lets you asynchronously load CSS & JS after a set pre-defined feature tests.

Support Tables

Up-to-date data on support for type and typographic features on the web.

65
8
3y 9m
n/a

This repository contains compatibility data for Web technologies as displayed on MDN

3.15K
1.44K
2d
CC0-1.0

Just a collection of quirks and issues that occur on browser platforms (particularly those unlikely to update)

855
20
8y 6m
n/a

Overview of browser technologies with links to docs and test suites.

Compare feature implementations and limitations across desktop & mobile browsers.

Test and compare HTML5 feature support across browsers.

Fine-grained tests for CSS3 feature support of your current browser.

Compatibility tables for default local (system) fonts.

Compare feature support of HTML5 tags, input types and properties across major browsers.

ARIA roles and attributes support for different screen reader and browser combinations.

Lists and checks modern web APIs like access to device system, sensors and actuators.

Compare which APIs are supported in Web Workers and Service Workers across browsers.

Explore features with recommendations and links to polyfills.

Lets you compare implementation of API specifications in major desktop browsers.

Overview of JavaScript feature support across browsers and other runtimes.

Overview of JavaScript feature support across NodeJS versions.

Current status of ServiceWorker support in different 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 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 support for Houdini (low-level APIs exposing parts of the CSS rendering engine) across browsers.

MDN's web technology documentation has a browser compatibility table end the end of each article.

Can I email… Support tables for HTML and CSS in emails.

Testing Methods

A browser automation framework and ecosystem.

19.19K
6.06K
2d
Apache-2.0

Automated auditing, performance metrics, and best practices for the web.

21.19K
7.43K
5d
Apache-2.0

Lets you test manually on actual devices (for free).

Good way to test if your content is accessible at the baseline. Try Lynx for example.

Download the app, emulate on desktop, setup to test local websites. (Opera Mini accounts for over 5% browser usage world wide)

Web page to see the pre-rendered source code of a page.

Cross-browser test your website.

Test your website for cross browser compatibility on real browsers. Instant access to multiple desktop and mobile browsers. Get Free Trial.

Checklist of 2nd edition (PDF)](http://adaptivewebdesign.info/2nd-edition/checklist.pdf) - Actionable list to check you've applied Progressive Enhancement best practices. Part of Adaptive Web Design book.

Chrome DevTools extension to toggle support of selected CSS features for testing progressive enhancement fallbacks.

Custom Form Elements

Accessible, custom slider widget based on a standard HTML select

35
8
5y 8m
MIT

A set of React components to easily create isomorphic forms

30
2
4y 92d
n/a

Based on HTML radio buttons, visually enhanced using CSS pseudo classes and elements.

With custom focus, hover and checked state. Enhanced asynchronously.

Checkbox or radios, visually enhanced to sliding toggle switches using CSS only.

Based on HTML radio buttons, visually enhanced using CSS pseudo classes and elements.

Data Visualisations

From definition list to SVG illustration (article with demos).

From data table to themed charts using HTML5 canvas (article and library).

Images

A lazy image loader designed to enforce progressive enhancement and valid HTML.

189
11
6m
MIT

List of images enhanced into responsive carousel with various behaviour options.

Menus

List of links in footer enhanced to off-canvas menu.

Page Navigation

Unobtrusive page transitions with jQuery.

4.42K
528
4y 57d
MIT

pushState + ajax = pjax

16.74K
2.1K
3y 6m
MIT

Easily enable fast Ajax navigation on any website (using pushState + xhr)

1.11K
126
1y 53d
MIT

Turbolinks makes navigating your web application faster

12.15K
607
6m
MIT

Add page transitions with event hooks, cache and prefetch support.

Related Articles

Plea to developers to consider browser differences and build a resilient web.