Track Progressive Enhancement Resources Updates Weekly
Resources on Progressive Enhancement. From concept and strategies to feature detection & testing methods. Complete with a list of (code) examples.
🏠 Home · 🔍 Search · 🔥 Feed · 📮 Subscribe · ❤️ Sponsor · 😺 jbmoelker/progressive-enhancement-resources · ⭐ 102 · 🏷️ Front-End Development
Feb 13 - Feb 19, 2023
Support Tables
- iOS PWA Compatibility - Support table for PWA features including service worker, manifest, background sync and push notifications (Unofficial, maintained by Maximiliano Firtman).
May 02 - May 08, 2022
Support Tables
- Project Fugu API tracker - Browser support status overview of web API's filling the "app gap".
Mar 15 - Mar 21, 2021
Support Tables
- Accessibility Support - Compare accessibility support of HTML elements and ARIA roles across browsers & assistive technologies.
Aug 17 - Aug 23, 2020
Support Tables
- Is Houdini ready yet? - Overview of support for Houdini (low-level APIs exposing parts of the CSS rendering engine) across browsers.
Sep 16 - Sep 22, 2019
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.
Jan 21 - Jan 27, 2019
Testing Methods
- CSS Feature Toggles - Chrome DevTools extension to toggle support of selected CSS features for testing progressive enhancement fallbacks.
Jan 29 - Feb 04, 2018
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.
Dec 25 - Dec 31, 2017
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.
Jul 31 - Aug 06, 2017
The Concept
- Designing with Progressive Enhancement - The book (400+ pages) on Progressive Enhancement.
Apr 10 - Apr 16, 2017
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.
Sep 26 - Oct 02, 2016
Testing Methods
Jun 06 - Jun 12, 2016
Support Tables
- Webkit Platform Status (Safari)
Testing Methods
- Continuously run automated tests in different browsers using BrowserStack, Saucelabs or other alternatives.