Progressive Enhancement

Progressive Enhancement Resources ¶

A comprehensive collection of resources on Progressive Enhancement. From concept and strategies to feature detection and testing methods. Complete with a list of (code) examples.

The Concept¶

Progressive Enhancement means gradually improving the user experience after verifying the target environment (e.g. browser) is capable of it. Start with content and ensure you maintain functionality & accessibility.

The Role of Enhancement in Web Design - From the concept of enhancement to the criteria and rules for enriching the user interface.
Understanding Progressive Enhancement - Apply technologies in an intelligent way, layer-upon-layer, to craft an amazing experience.
Designing with Progressive Enhancement - The book (400+ pages) on Progressive Enhancement.
Detecting (HTML5) features - Intro to different feature detection techniques with examples and demos.
Progressive Web Apps - Enhancing web sites into native-like apps (progressive, not hybrid).

Strategies¶

You can apply Progressive Enhancement in different ways:

Make the page usable with only HTML - This sets the baseline for every device and browser.
Test Driven Progressive Enhancement - Core functional experience enhanced after testing capabilities.
Cut the mustard - Set a threshold for collection of enhancements.
Grade components, not browsers - Component level feature tests and enhancements.
Feature vs Browser vs Form factor detection - As different strategies to tune your app to its environment.
Server-side device detection - Use user-agent and other HTTP header info combined with a device database to conditionally serve files.
Writing polyfills - If your baseline is still too high for some browsers, consider polyfills (aka Regressive Enhancement).
Application Shell Architecture - Setup for instant loading web apps.

Feature Detection¶

Before you try to enhance the experience, you need to ensure the environment is capable of the enhancement. You test this by performing feature detections:

CSS feature queries (CSS.supports() & @supports()) - Natively test if specific CSS feature is supported using JS method or CSS declaration.
Feature Detect ES6 - Detect which ES2015 features are available.
SVG requiredFeatures - Render SVG elements only if their [requiredFeatures] evaluate to true.
Modernizr - Extensive feature detection suite (supports custom builds).
Feature.js - Lightweight feature detection suite.
Conditioner.js - Conditionally load JS modules based on directives in HTML attributes.
EnhanceJS - Lets you asynchronously load CSS & JS after a set pre-defined feature tests.

Support Tables¶

Different environments (platforms, browsers, versions) have different capabilities. Support tables tell you what capabilities each environment has. Knowing the level of support can help you weigh an enhancement against the effort and impact of its implementation.

The Web Platform - Overview of browser technologies with links to docs and test suites.
Can I use ...? - Compare feature implementations and limitations across desktop & mobile browsers.
I want to use ... - Figure out the browser support of combinations of features.
HTML5 Test - Test and compare HTML5 feature support across browsers.
CSS3 Test - Fine-grained tests for CSS3 feature support of your current browser.
Accessibility Support - Compare accessibility support of HTML elements and ARIA roles across browsers & assistive technologies.
State of Web Type - Support tables for type and typographic features on the web.
Font Family Reunion - Compatibility tables for default local (system) fonts.
HTML5 Accessibility - Compare feature support of HTML5 tags, input types and properties across major browsers.
WAI-ARIA Screen reader compatibility - ARIA roles and attributes support for different screen reader and browser combinations.
What web can do today - Lists and checks modern web APIs like access to device system, sensors and actuators.
HTML5 Worker test - Compare which APIs are supported in Web Workers and Service Workers across browsers.
HTML5 Please - Explore features with recommendations and links to polyfills.
API Catalog - Lets you compare implementation of API specifications in major desktop browsers.
Kangax's ECMAScript compatibility table - Overview of JavaScript feature support across browsers and other runtimes.
Node compatibility table - Overview of JavaScript feature support across NodeJS versions.
Is service worker ready? - Overview of support for all features involved in the core technology behind Progressive Web Apps.
Is PWA ready? - Overview of support for the core and related technologies behind Progressive Web Apps for both popular global and many Chinese browsers.
Is WebRTC ready yet? - Overview of support for the different browser features behind real time communication.
Is WebVR ready? - Overview of support of different browser features behind WebVR including display, gamepad, audio and speech APIs.
Is Houdini ready yet? - Overview of support for Houdini (low-level APIs exposing parts of the CSS rendering engine) across browsers.
Chrome Platform Status
Edge Platform Status
Firefox Platform Status
Webkit Platform Status (Safari)
MDN Compatibility tables - MDN's web technology documentation has a browser compatibility table end the end of each article.
MDN Browser Compat Data - npm module powering the MDN Compatibility tables.
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? - Support tables for HTML and CSS in emails. Inspired by Can I use.
Project Fugu API tracker - Browser support status overview of web API's filling the "app gap".
iOS PWA Compatibility - Support table for PWA features including service worker, manifest, background sync and push notifications (Unofficial, maintained by Maximiliano Firtman).

Testing Methods¶

With progressive enhancement you support different experiences in different environments. These are some ways to test all these variations:

Open Device Lab - Lets you test manually on actual devices (for free).
Testing in Opera Mini - Download the app, emulate on desktop, setup to test local websites. (Opera Mini accounts for over 5% browser usage world wide)
cURL - Web page to see the pre-rendered source code of a page.
Browserling - Lets you manually test web pages in different versions of browsers on Windows and Android platforms.
Run Internet Explorer using Virtual Machines - To test IE browsers on other platforms.
Device emulators and simulators
Configure Desired Capabilities in Selenium - Run automated browser tests in different scenarios.
Continuously run automated tests in different browsers using BrowserStack, Saucelabs or other alternatives.
Lighthouse - Audit and meassure performance of Progressive Web Apps (via cli or Chrome extension).
Progressive Enhancement checklist (1^st edition, HTML), Checklist of 2^nd edition (PDF) - Actionable list to check you've applied Progressive Enhancement best practices. Part of Adaptive Web Design book.
CSS Feature Toggles - Chrome DevTools extension to toggle support of selected CSS features for testing progressive enhancement fallbacks.

Examples¶

Custom Form Elements¶

Fancy radio buttons - Based on HTML radio buttons, visually enhanced using CSS pseudo classes and elements.
Checkboxes & radio buttons - With custom focus, hover and checked state. Enhanced asynchronously.
Toggle switch - Checkbox or radios, visually enhanced to sliding toggle switches using CSS only.
5-star rating - Based on HTML radio buttons, visually enhanced using CSS pseudo classes and elements.
jQuery slider - Accessible, custom slider widget based on a standard HTML select.
jQuery custom file input - Article and library.
React isomorphic form - Set of React form components which can be pre-rendered & handled server-side. They are enhanced client-side without losing state.

Data Visualisations¶

Timeline - From definition list to SVG illustration (article with demos).
Charts - From data table to themed charts using HTML5 canvas (article and library).

Images¶

Responsive Carousel - List of images enhanced into responsive carousel with various behaviour options.
Lazy Progressive Enhancement - Lazy load images inside <noscript> tags. (note: Evergreen browsers only)

Menus¶

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

Asynchronously fetch and transition between static pages using ajax and history.pushState:

Barba.js - Add page transitions with event hooks, cache and prefetch support.
SmoothState.js - Add page transitions with event hooks, cache and prefetch support. (requires jQuery).
MoOx/pjax - Similar tot jquery-pjax, but without the jQuery dependency.
Turbolinks - Add page transitions with event hooks and cache support. Has adapters to bind to native navigation controls on iOS and Android.

Make the web work for everyone - Plea to developers to consider browser differences and build a resilient web.
How many people are missing out on JavaScript enhancement? - Research on why in 1.1% of page visits JavaScript isn't loaded.

License¶

Jasper Moelker waives all rights to this work worldwide under copyright law, including all related and neighboring rights, to the extent allowed by law.

You can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission.

Progressive Enhancement