Modernizr: front-end development done right

 23 Reviews Add a review

Published December 2011

New web technologies are fun... until you have to support old browsers. Modernizr can help.

Looking for a new take on Modernizr? Take Ryan’s Modernizr 3! Modernizr is a feature detection library that works by running tests to see what CSS3 and HTML5 features the current browser supports. It then gives you CSS classes and a JavaScript API so you can tailor a solid experience around what the current browser is capable of. This course will take you through getting up to speed with Modernizr through to using its more advanced features and how you can add your own custom feature detects using the plugin architecture. 

What you'll learn

  • Use Modernizr in your CSS and Javascript
  • Injecting elements and styles project files
  • Building a Modernizr plugin
Meet your instructor
Ryan Seddon

Ryan is a contributor to Modernizr he has a deep knowledge of its inner workings. Ryan has presented talks at various events and written for some great blogs. Ryan is an active blogger, twitterer and contributor to open source software.

Lesson 1: Getting started
Free Introduction 3:15
Free Getting started 4:30
Free Starter files
Lesson 2: Using it in your CSS and JavaScript
Using Modernizr in your CSS
Using Modernizr in your CSS 6:53
Using Modernizr in your JavaScript
Using Modernizr in your JavaScript 3:55
Some links to the techniques and libraries used
Lesson 3: Featured based resource loading using Modernizr.load
Featured based resource loading
Doing a fallback for CSS animations using Modernizr.load 4:47
Further reading resources for Modernizr.load
Lesson 4: Modernizr and media queries
Media queries in your JavaScript
Media queries in your JavaScript 4:52
More reading on media queries
Lesson 5: Injecting elements and styles
Injecting elements and styles project files
Injecting elements and styles for more andvanced feature detects 4:29
Further reading resources for Modernizr.testStyles
Lesson 6: Handling the prefix minefield
CSS prefixing with Modernizr
CSS prefixing with Modernizr 6:45
DOM prefixing in Modernizr
DOM prefixing in Modernizr 5:13
Further reading resources for handling prefixes
Lesson 7: Rolling it all together by building a plugin
Overview of Modernizr plugins 1:58
Building a Modernizr plugin
Building a Modernizr plugin 7:24
Further reading resources for Modernizr.addTest
Lesson 8: What's next?
Modernizr needs you! 3:54
Further reading resources to help Modernizr

Leave a Review