Resources on Progressive Enhancement. From concept and strategies to feature detection & testing methods. Complete with a list of (code) examples.
This page lists names, links and short descriptions. The original list on GitHub is the source and belongs to its authors.
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.
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).
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 polyfills (aka Regressive Enhancement).
Setup for instant loading web apps.
(CSS.supports() & @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.
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.
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.
npm module powering the MDN Compatibility tables.
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 Can I use.
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 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.
Lets you manually test web pages in different versions of browsers on Windows and Android platforms.
To test IE browsers on other platforms.
Run automated browser tests in different scenarios.
Audit and meassure performance of Progressive Web Apps (via cli or Chrome extension).
, Checklist of 2nd edition (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.
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.
Accessible, custom slider widget based on a standard HTML select.
Article and library.
Set of React form components which can be pre-rendered & handled server-side. They are enhanced client-side without losing state.
List of images enhanced into responsive carousel with various behaviour options.
Lazy load images inside <noscript> 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.
Add page transitions with event hooks, cache and prefetch support. (requires jQuery).
Add page transitions with support for multiple containers / content slots (requires jQuery).
Similar tot jquery-pjax, but without the jQuery dependency.
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.
vuejs/awesome-vue
🎉 A curated list of awesome things related to Vue.js
VoltAgent/awesome-design-md
A collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.
PatrickJS/awesome-angular
:page_facing_up: A curated list of awesome Angular resources
AdrienTorris/awesome-blazor
Resources for Blazor, a .NET web framework using C#/Razor and HTML that runs in the browser with WebAssembly.
AllThingsSmitty/must-watch-css
CSS talks you have to see covering CSS Grid, flexbox, custom variables, performance, frameworks, tooling, and more! 📺
jondot/awesome-react-native
Awesome React Native components, news, tools, and learning material!