Modernizr : Modernizr is a JavaScript library that detects the features available in a user's browser.
This technology is used by 6.49% of websites in the JavaScript libraries category. The most popular industry vertical is Business and Finance, with Business being the top subcategory.
What is Modernizr?
Modernizr is a JavaScript library that detects HTML5 and CSS3 feature availability in browsers. Rather than checking browser user-agent strings (unreliable), Modernizr tests actual feature support by running small detection scripts for each capability.
Created in 2009, Modernizr pioneered feature detection as a best practice. It adds CSS classes to the <html> element indicating supported features: flexbox, no-flexbox, canvas, no-canvas. Developers write fallback styles using these classes.
Modernizr also exposes a JavaScript API: Modernizr.flexbox returns true/false. This enables conditional code loading—load a polyfill only when native support is missing. The library influenced how the industry approaches progressive enhancement.
Industry Vertical Distribution
Technologies Frequently Used with Modernizr
| Technology | Co-usage Rate | Website |
|---|---|---|
| jQuery | 68.93% | https://jquery.com |
| Google Font API | 55.6% | http://google.com/fonts |
| Google Analytics | 51.72% | http://google.com/analytics |
| PHP | 43.15% | http://php.net |
| Google Tag Manager | 39.58% | http://www.google.com/tagmanager |
| MySQL | 38.74% | http://mysql.com |
| jQuery Migrate | 38.41% | https://github.com/jquery/jquery-migrate |
| WordPress | 38.38% | https://wordpress.org |
| Font Awesome | 32.35% | https://fontawesome.com/ |
| Bootstrap | 30.5% | https://getbootstrap.com |
How Modernizr Works
Feature Detection: Modernizr creates test elements, applies styles/APIs, and checks results. For canvas: create canvas element, test getContext('2d'). For flexbox: create div, apply display: flex, measure computed style.
CSS Classes: On page load, Modernizr adds classes to <html>: <html class="js flexbox canvas webgl no-touch">. CSS targets these: .no-flexbox .fallback { display: block; }
Custom Builds: Full Modernizr includes 50+ tests. modernizr.com build tool creates custom versions with only needed detections, reducing file size from 50KB to under 10KB.
Async Loading: Modernizr's Modernizr.load() (via yepnope) conditionally loads scripts: if feature missing, load polyfill; otherwise, load optimized version.
Test Categories: CSS (flexbox, grid, transforms, animations), HTML5 (canvas, video, audio, localStorage), JavaScript APIs (Promise, WebGL, Geolocation), and input types (date, email, range).
AI-Powered Technology Recommendations
Our AI recommender engine, trained on 100 million data points, suggests these technologies for websites using Modernizr:
| Technology | AI Score | Website |
|---|---|---|
| Squarespace | 0.22 | http://www.squarespace.com |
| YUI | 0.17 | http://yuilibrary.com |
| jQuery | 0.15 | https://jquery.com |
| Typekit | 0.13 | http://typekit.com |
| Apple Pay | 0.11 | https://www.apple.com/apple-pay |
| Cart Functionality | 0.1 | https://www.wappalyzer.com/technologies/ecommerce/cart-functionality |
| Handlebars | 0.1 | http://handlebarsjs.com |
| ZURB Foundation | 0.08 | http://foundation.zurb.com |
| Google Font API | 0.08 | http://google.com/fonts |
| Bootstrap | 0.08 | https://getbootstrap.com |
IAB Tier 1 Vertical Distribution
Relative Usage by Industry
Market Distribution Comparison
Modernizr Use Cases
Progressive Enhancement: Detect if browser supports CSS Grid. If yes, use grid layout. If no, fall back to floats. Users get the best experience their browser can handle.
Polyfill Loading: Load HTML5 shiv only in IE8. Load Promises polyfill only if native Promise undefined. Saves bandwidth for modern browsers.
Touch vs. Mouse Interfaces: Detect touch capability. Show hover effects on non-touch devices; implement tap/swipe on touch devices. Different UI paradigms per device.
WebGL/Canvas Fallbacks: Interactive visualizations use WebGL when available, fall back to 2D canvas, or display static images when neither works.
Video Format Support: Detect which video codecs are supported (H.264, WebM, Ogg). Serve appropriate format. Display Flash fallback (historically) or message.
CSS Feature Queries Alternative: Before @supports was widespread, Modernizr was the only reliable way to detect CSS feature support for fallbacks.
IAB Tier 2 Subcategory Distribution
Top Websites Using Modernizr
| Website | IAB Category | Subcategory | OpenRank |
|---|---|---|---|
| bbc.com | News and Politics | International News | 7.39 |
| npr.org | News and Politics | Talk Radio | 7.23 |
| goodreads.com | Books and Literature | Sci-fi and Fantasy | 7.14 |
| cnn.com | News and Politics | International News | 7.09 |
| reverbnation.com | Music and Audio | Industries | 7 |
| investopedia.com | Personal Finance | Financial Planning | 6.58 |
| poynter.org | Business and Finance | Industries | 6.58 |
| samsung.com | Technology & Computing | Consumer Electronics | 6.52 |
| thenextweb.com | Business and Finance | Industries | 6.51 |
| mn.gov | Personal Finance | Travel Type | 6.51 |
Modernizr Examples
CSS Fallback Pattern
/* Modern browsers: use grid */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* Fallback for browsers without grid support */
.no-cssgrid .container {
display: flex;
flex-wrap: wrap;
}
.no-cssgrid .container > div {
width: 33.333%;
padding: 10px;
}JavaScript Conditional Loading
// Check feature support in JavaScript
if (Modernizr.canvas) {
initCanvasAnimation();
} else {
document.querySelector('.canvas-fallback').style.display = 'block';
}
// Conditional script loading
Modernizr.load({
test: Modernizr.geolocation,
yep: 'app-with-location.js',
nope: 'geolocation-polyfill.js',
complete: function() {
initLocationFeatures();
}
});Usage by Domain Popularity (Top 1M)
Usage by Domain Age
The average age of websites using Modernizr is 12.2 years. The average OpenRank (measure of backlink strength) is 2.44.
Modernizr: Modern Relevance
Legacy Value: Modernizr was essential 2010-2018 when IE8-11 required extensive fallbacks. It established feature detection as an industry standard practice.
CSS @supports: Modern browsers support @supports (display: grid) { } natively. This reduces need for Modernizr's CSS feature detection.
When Still Useful: Complex feature combinations, JavaScript API detection, and legacy browser support scenarios still benefit from Modernizr's comprehensive tests.
Modern Alternatives: For simple checks, inline feature detection suffices: if ('serviceWorker' in navigator). Build custom tests for specific needs.
Build Optimization: If using Modernizr, always create custom builds including only needed tests. Full library is overkill for most sites.
Consider Dropping: If your browserslist targets only modern browsers (last 2 Chrome, Firefox, Safari, Edge), Modernizr often provides no value. Test if removing it breaks anything.
Emerging Websites Using Modernizr
| Website | IAB Category | Subcategory | OpenRank |
|---|---|---|---|
| jorelmillwork.com | Business and Finance | Industries | 0 |
| biggspllc.com | Real Estate | Auto Buying and Selling | 0 |
| clarencecc.org | Events and Attractions | Spirituality | 0 |
| michaelkeeney.com | Hobbies & Interests | Arts and Crafts | 0 |
| stevensavoca.com | Hobbies & Interests | Games and Puzzles | 0 |
Technologies Less Frequently Used with Modernizr
| Technology | Co-usage Rate | Website |
|---|---|---|
| 51.LA | 0% | https://www.51.la |
| Addsearch | 0% | https://www.addsearch.com/ |
| Adjust | 0% | https://www.adjust.com |
| Affiliate Future | 0% | http://affiliatefuture.com |
| AFThemes CoverNews | 0% | https://afthemes.com/products/covernews |
