Is Modernizr really needed if you're not using the feature detection?

Question

I keep jumping into projects where Modernizr is located in the head, but it isn't being used (at least for feature detection). Now, I love Modernizr, I use it frequently for feature detection and fallbacks on projects that require it; however, the last three projects I've come into it's been sitting in the head without any of the feature detection classes being called. These projects are using vanilla javascript and/or do not require jQuery polyfills at all. ¹ That being said... if you're not using the feature detection and really don't need to load a jQuery library ², is Modernizr really doing anything aside from making an addition HTTP request and resource to load?

I'm not strong enough with jQuery/javascript to understand if it's affecting anything else under the hood.

---

Edit

¹ & ² — Modernizr is javascript and doesn't require the jQuery library (which makes me wonder why the jQuery library is being loaded also, at least in these cases).

Modernizr.min with only #-shiv-cssclasses-load is 7.57 KB whereas html5shiv.min is only 3 KB.

Answer 1

Generally speaking, Modernizr does three things.

1. It adds classes indicating feature support, allowing you to apply different styling to elements depending on what features they support.
2. It allows you to run feature detection to decide whether to run a script/run a polyfill or not.
3. It injects html5shiv, which allows old browsers to understand HTML5 elements.

If you don't use any of these features, then there's no point in including Modernizr at all. If you only use it for the html5shiv then you could probably just include that instead to save a few bytes, although I doubt there's a relevant size difference at all.

That said, you should never include feature detects in a modernizr build that you don't use. That's nothing but a waste.

Answer 2

Modernizr also include shims which save you from defining them yourself or including another library.

The main goal of Modernizr is to use detection via classes. so you can do something like this:

Example, where you want to change behaviour depending on whether the client support flash:

.flash #flashdiv {   display:block; }     .no-flash #flashdiv {   display:none; } 

It really helps you to dynamically deal with the abilities different client browsers.

Also, you can use Modernizr to detect HTML5 features and provide fallbacks (polyfills).

Eg:

<script>   if (Modernizr.canvas) {     alert("This browser supports HTML5 canvas!"); //you can load js here. or use yepnope)   } </script>