progressive-enhancement-resources
github.com/voorhoede/progressive-enhancement-resources ↗Resources on Progressive Enhancement. From concept and strategies to feature detection & testing methods. Complete with a list of (code) examples.
Use this list with your AI agent
Add the Context Awesome MCP server to Claude, Cursor, or any MCP client, then ask:
"Show me custom form elements resources from progressive-enhancement-resources"
Installation instructions →What's inside
Examples
- 5-star ratingCustom Form Elements
Based on HTML radio buttons, visually enhanced using CSS pseudo classes and elements.
- Barba.jsPage Navigation
Add page transitions with event hooks, cache and prefetch support.
- ChartsData Visualisations
From data table to themed charts using HTML5 canvas (article and library).
- Checkboxes & radio buttonsCustom Form Elements
With custom focus, hover and checked state. Enhanced asynchronously.
- Fancy radio buttonsCustom Form Elements
Based on HTML radio buttons, visually enhanced using CSS pseudo classes and elements.
- jQuery custom file inputCustom Form Elements
Article and library.
Support Tables
- Accessibility Support
Compare accessibility support of HTML elements and ARIA roles across browsers & assistive technologies.
- API Catalog
Lets you compare implementation of API specifications in major desktop browsers.
- Can I Email?
Support tables for HTML and CSS in emails. Inspired by
- Can I use ...?
Compare feature implementations and limitations across desktop & mobile browsers.
- Chrome Platform Status
- CSS3 Test
Fine-grained tests for CSS3 feature support of your current browser.
The Concept
- Adaptive Web Design
Book on Progressive Enhancement from content to design and interaction.
- Designing with Progressive Enhancement
- Detecting (HTML5) features
Intro to different feature detection techniques with examples and demos.
- Progressive Enhancement: It's about the content
Sharing content is the core of the web. Progressive Enhancement ensures access to content.
- Progressive Web Apps
Enhancing web sites into native-like apps (progressive, not hybrid).
- The Role of Enhancement in Web Design
From the concept of enhancement to the criteria and rules for enriching the user interface.
Strategies
- Application Shell Architecture
Setup for instant loading web apps.
- Cut the mustard
Set a threshold for collection of enhancements.
- Feature vs Browser vs Form factor detection
As different strategies to tune your app to its environment.
- Grade components, not browsers
Component level feature tests and enhancements.
- Make the page usable with only HTML
This sets the baseline for every device and browser.
- Server-side device detection
Use user-agent and other HTTP header info combined with a device database to conditionally serve files.
Testing Methods
- Browserling
Lets you manually test web pages in different versions of browsers on Windows and Android platforms.
- BrowserStack
- Configure Desired Capabilities in Selenium
Run automated browser tests in different scenarios.
- CSS Feature Toggles
Chrome DevTools extension to toggle support of selected CSS features for testing progressive enhancement fallbacks.
- cURL
Web page to see the pre-rendered source code of a page.
- Device emulators and simulators
Feature Detection
- Conditioner.js
Conditionally load JS modules based on directives in HTML attributes.
- CSS feature queries
Natively test if specific CSS feature is supported using JS method or CSS declaration.
- EnhanceJS
Lets you asynchronously load CSS & JS after a set pre-defined feature tests.
- Feature Detect ES6
Detect which ES2015 features are available.
- Feature.js
Lightweight feature detection suite.
- Modernizr
Extensive feature detection suite (supports custom builds).
Related Articles
- How many people are missing out on JavaScript enhancement?
Research on why in 1.1% of page visits JavaScript isn't loaded.
- Make the web work for everyone
Plea to developers to consider browser differences and build a resilient web.
Showing a sample of 85 resources. View the full list on GitHub →