Support Tables

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

Support Tables

• Project Fugu API tracker - Browser support status overview of web API's filling the "app gap".

Support Tables

• Accessibility Support - Compare accessibility support of HTML elements and ARIA roles across browsers & assistive technologies.

Support Tables

• Is Houdini ready yet? - Overview of support for Houdini (low-level APIs exposing parts of the CSS rendering engine) across browsers.

Support Tables

• State of Web Type (⭐67) - Support tables for type and typographic features on the web.

• Can I Email? - Support tables for HTML and CSS in emails. Inspired by Can I use.

Testing Methods

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

Support Tables

• 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.

Support Tables

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

• MDN Browser Compat Data (⭐4.4k) - npm module powering the MDN Compatibility tables.

The Concept

• Designing with Progressive Enhancement - The book (400+ pages) on Progressive Enhancement.

The Concept

• Progressive Enhancement: It's about the content - Sharing content is the core of the web. Progressive Enhancement ensures access to content.

• 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.

• Adaptive Web Design - Book on Progressive Enhancement from content to design and interaction.

• 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

• The Content-out Approach - Provide wide access to content without technological restrictions.

• 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

• 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

• 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.

• 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 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.

• Device Bugs & Quirks (⭐859) - Crowd sourced collection of weird HTML, CSS, and JS quirks in mobile devices, which you won't find in the other support tables.

Testing Methods

• Open Device Lab - Lets you test manually on actual devices (for free).

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

• 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.

• Configure Desired Capabilities in Selenium (⭐26k) - Run automated browser tests in different scenarios.

• Lighthouse (⭐26k) - Audit and meassure performance of Progressive Web Apps (via cli or Chrome extension).

• Progressive Enhancement checklist (1st edition, HTML), Checklist of 2nd edition (PDF) - Actionable list to check you've applied Progressive Enhancement best practices. Part of Adaptive Web Design book.

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 (⭐34) - Accessible, custom slider widget based on a standard HTML select.

• jQuery custom file input - Article and library.

• React isomorphic form (⭐30) - Set of React form components which can be pre-rendered & handled server-side. They are enhanced client-side without losing state.

Examples / 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).

Examples / Images

• Responsive Carousel - List of images enhanced into responsive carousel with various behaviour options.

• Lazy Progressive Enhancement (⭐190) - Lazy load images inside <noscript> tags. (note: Evergreen browsers only)

Examples / Menus

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

Examples / Page Navigation

• Barba.js - Add page transitions with event hooks, cache and prefetch support.

• SmoothState.js (⭐4.5k) - Add page transitions with event hooks, cache and prefetch support. (requires jQuery).

• jquery-pjax (⭐17k) - Add page transitions with support for multiple containers / content slots (requires jQuery).

• MoOx/pjax (⭐1.3k) - Similar tot jquery-pjax, but without the jQuery dependency.

• Turbolinks (⭐13k) - Add page transitions with event hooks and cache support. Has adapters to bind to native navigation controls on iOS and Android.

Related Articles / Page Navigation

• 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.

Testing Methods

• Device emulators and simulators

Support Tables

• Chrome Platform Status

• Edge Platform Status

• Firefox Platform Status

• Webkit Platform Status (Safari)

Testing Methods

• Continuously run automated tests in different browsers using BrowserStack, Saucelabs or other alternatives.