#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. User Avatar

    awesome, thanks for doing this…

  2. User Avatar
    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. User Avatar
    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. User Avatar

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

  5. User Avatar

    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. User Avatar
    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. User Avatar

    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. User Avatar
    Joe G.
    Permalink to comment#

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

  9. User Avatar

    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. User Avatar
    Nojan A.

    Very informative screencast. thanks for doing it.

  11. User Avatar

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

  12. User Avatar
    Permalink to comment#

    Great video, highly instructive. Tnks

    @Nicklas +1 :)

  13. User Avatar
    Tim Smith
    Permalink to comment#

    When will you post your next video?

  14. User Avatar
    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. User Avatar
    Permalink to comment#

    Thank you for making this video.

  16. User Avatar
    Permalink to comment#

    Thank you, this is exactly what I needed!

  17. User Avatar
    Permalink to comment#

    Thanks! Helpful!

  18. User Avatar
    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. User Avatar

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

  20. User Avatar
    Permalink to comment#

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

  21. User Avatar
    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!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.