explaingit

fgnass/modernizr

Analysis updated 2026-08-11 · repo last pushed 2014-04-01

JavaScriptAudience · developerComplexity · 2/5DormantLicenseSetup · easy

TLDR

Modernizr checks what web features a visitor's browser supports, then gives developers a way to adapt their site so it works well across both old and new browsers.

Mindmap

mindmap
  root((repo))
    What it does
      Browser feature checks
      Adds labels to page
      Triggers different styles
    Use cases
      Support older browsers
      Use modern layout safely
      Progressive enhancement
    Tech stack
      JavaScript library
      Customizable build
    Audience
      Web developers
      Web designers
    Key features
      Async check handling
      On-demand loading
      Fine-grained control

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Detect whether a visitor's browser supports a modern layout technique and provide a fallback for older browsers.

USE CASE 2

Build a site that progressively enhances the experience for up-to-date browsers while still working on older ones.

USE CASE 3

Customize which feature checks are included so your site only loads the tests it actually needs.

USE CASE 4

Run follow-up actions after browser checks that take a moment to complete.

What is it built with?

JavaScriptHTMLCSS

How does it compare?

fgnass/modernizr00kaku/gallery-slider-block0verflowme/weirdhta
LanguageJavaScriptJavaScriptJavaScript
Last pushed2014-04-012021-05-192022-06-16
MaintenanceDormantDormantDormant
Setup difficultyeasyeasymoderate
Complexity2/52/52/5
Audiencedevelopergeneraldeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

Just include the Modernizr script in your HTML head, no server, API key, or build step required.

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

Modernizr is a tool that helps websites adapt to different web browsers. Not every browser supports the same features, and this can cause a website to look broken or behave differently depending on where a visitor is coming from. Modernizr solves this by checking what a specific browser can do and then giving developers a way to adjust the site accordingly. When Modernizr runs on a webpage, it performs a series of checks on the visitor's browser to see which modern web features are supported. It then shares the results in two ways: by adding labels to the page that developers can check, and by adding specific tags to the page's code that can trigger different styling rules. This allows developers to progressively enhance their pages, meaning they can provide a richer experience for visitors with up-to-date browsers while ensuring things still work for those with older ones. Web developers and designers use this when they need to support a wide range of users but want to take advantage of newer web capabilities. For example, a developer might want to use a modern layout technique but needs a fallback plan for older browsers that don't support it. Modernizr provides the information needed to make those on-the-fly decisions, giving fine-grained control over the user experience without having to guess what a visitor's browser can handle. The project also offers a system for handling checks that take a moment to complete, letting developers trigger follow-up actions once those checks finish. It can be customized so a project only includes the specific checks it actually needs, which helps keep things running quickly. The README does not go into detail on the full range of specific browser features it tests for, but it points to external documentation for those deeper specifics.

Copy-paste prompts

Prompt 1
Add Modernizr to my HTML page and show me how to check if the browser supports CSS Grid, then load a fallback stylesheet if it doesn't.
Prompt 2
Set up a Modernizr custom build that only includes checks for flexbox, SVG, and WebP so the file stays small.
Prompt 3
Show me how to use Modernizr's asynchronous feature detection to run a callback once a check like WebRTC support finishes.
Prompt 4
Explain how Modernizr adds CSS classes to the html element and give me an example of writing CSS rules that target both supported and unsupported browsers.

Frequently asked questions

What is modernizr?

Modernizr checks what web features a visitor's browser supports, then gives developers a way to adapt their site so it works well across both old and new browsers.

What language is modernizr written in?

Mainly JavaScript. The stack also includes JavaScript, HTML, CSS.

Is modernizr actively maintained?

Dormant — no commits in 2+ years (last push 2014-04-01).

What license does modernizr use?

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

How hard is modernizr to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is modernizr for?

Mainly developer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.