progressive-enhancement-resources

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

(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)

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

Component level feature tests and 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 (aka )

Setup for instant loading web apps

( & ) - 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 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

Overview of browser technologies with links to docs and test suites

Compare feature implementations and limitations across desktop & mobile browsers

Figure out the browser support of combinations of features

Test and compare HTML5 feature support across browsers

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

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

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

Overview of support for all features involved in the core technology behind Progressive Web Apps

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

(Safari)

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

Support tables for HTML and CSS in emails. Inspired by

Browser support status overview of web API's filling the "app gap"

Support table for PWA features including service worker, manifest, background sync and push notifications (Unofficial, maintained by Maximiliano Firtman)

Lets you (for free)

Good way to test if your content is accessible at the baseline. Try 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

Lets you manually test web pages in different versions of browsers on Windows and Android platforms

To test IE browsers on other platforms

Configure Desired Capabilities in Selenium

Run automated browser tests in different scenarios

Continuously run automated tests in different browsers using , or other alternatives

Lighthouse

Audit and meassure performance of Progressive Web Apps (via cli or )

, - Actionable list to check you've applied Progressive Enhancement best practices. Part of

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

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

jQuery slider

Accessible, custom slider widget based on a standard HTML select

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

From definition list to SVG illustration (article with demos)

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

List of images enhanced into responsive carousel with various behaviour options

Lazy Progressive Enhancement

Lazy load images inside tags. (note: Evergreen browsers only)

List of links in footer enhanced to off-canvas menu

Add page transitions with event hooks, cache and prefetch support

SmoothState.js

Add page transitions with event hooks, cache and prefetch support. (requires jQuery)

jquery-pjax

Add page transitions with support for multiple containers / content slots (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

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

Research on why in 1.1% of page visits JavaScript isn't loaded