Grow your CSS skills. Land your dream job.

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

Comments

  1. Keobs

    awesome, thanks for doing this…

  2. 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. 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:
    img[src^=.svg]
    But the correct selector should have been:
    img[src$=.svg]

    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. 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. 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 !

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".