#126: Using Modernizr

Should Modernizr be part of every modern web project? Not necessarily. In this screencast I talk about how you need Modernizr when you plan to do something specifically different depending on its browser support determination.

Load scripts to support a feature when the browser lacks native support? Perfect.

Test if browser supports gradients before applying them? Probably not needed unless you need to do something very specifically different than your standard flat color fallback.

We look at an example where a box-shadow is important enough to our design that we need to test for it and do something different if we determine lack of support. Testing for SVG support and dealing with fallbacks is also a good use case. We also look at a simple scenario where a geolocation test probably wouldn't do us much good.


  1. Keobs

    awesome, thanks for doing this…

  2. Paul Lumsdaine

    Very good video Chris. Normally I just use the whole kit and caboodle but you made a very good case for just selecting what you need and tailoring it on a per project basis. Thanks!

  3. Peter Foti

    Nice. I saw my snippet from http://css-tricks.com/using-svg/#comment-297467 but one minor correction to your screencast…
    At about 21:50 you wrote this:
    But the correct selector should have been:

    Nice examples of when to use Modernizr and when not to.

  4. Fazil

    Thank you for the screencast, It’s very helpfull.

  5. Nicklas

    Please make a screencast on how to use version control with a project like WordPress. I find it hard to understand what to store in the svn and how the general workflow works. Do you store the entire WP installation? What about plugins, they can be updated through WP admin and often the theme is dependent on plugins, so do you store them as well? How do you manage updates? What about the database – everything is depending on it, is there a way to go about that as well?

    So many questions…

  6. Alan Shortis

    is it best practice to place what you want if the feature IS supported within a class? I have always just set that against the class to be styled, then use the cascade to override it if the feature isn’t supported.

  7. Subash

    I really like to thank you for this awesome video but I know a thank doesn’t make any sense in the comment thread so can you please consider adding vote button such as +1 or something which we can use to say thanks.

  8. Joe G.
    Permalink to comment#

    Great intro to Modernizr. love the videos and appreciate the time you take to put into them.

  9. Rob

    My way of handling Modernizr. Use the whole build during development, then when you are done and know what things you are checking for, get the more refined build. This way I dont have to worry about getting any different builds when I realize “oh, i should also be checking for XYZ”.

  10. Nojan A.

    Very informative screencast. thanks for doing it.

  11. David

    I dont’t use Modernizr – for me is headjs the best for this stuff

  12. Mayccoll
    Permalink to comment#

    Great video, highly instructive. Tnks

    @Nicklas +1 :)

  13. Tim Smith
    Permalink to comment#

    When will you post your next video?

  14. Ryan Milliken
    Permalink to comment#

    Thanks for this video. These libraries are incredibly useful and its rare to be able to see them described as thoroughly as you have here.

  15. Henrik
    Permalink to comment#

    Thank you for making this video.

  16. Dean
    Permalink to comment#

    Thank you, this is exactly what I needed!

  17. Luke
    Permalink to comment#

    Thanks! Helpful!

  18. iwan natake
    Permalink to comment#

    hahahahah mann. Very helpful and you cracked me up man. The part where you made the logo was awesome!

  19. andy

    Man, you talk too much. You don’t have to explain everything else; it’s about modernizr!
    it could have five minutes.

  20. Geo
    Permalink to comment#

    Thank you for this video, I know understand perfectly how to use modernizr and above all WHEN !

  21. Loren Helgeson
    Permalink to comment#

    Thanks for this, Chris. I was introduced to Modernizr a few months back, but I couldn’t see why I would use it, so I ditched it.

    After seeing this, I’ll be using it a lot more.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.