★★★⋆☆ 23 Reviews Add a review

Modernizr: front-end development done right

December 2011

What you'll learn

  • Use Modernizr in your CSS and Javascript
  • Injecting elements and styles project files
  • Building a Modernizr plugin
  • Intermediate

Join SitePoint Premium for instant access

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. 

The audio was clear. The material was concise. The author was knowledgeable and the examples are practical. I've used modernizr a few times in the past, and he hit all the things someone needs to know to use the tool effectively.
Philip A Senger

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

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.


Our algorithm thinks you'll like

Understanding the CSS Cascade

Russ Weakley

Demystify CSS order, specificity and origin.

HTML5 & CSS3 for the Real World: 2nd Edition

Alexis Goldstein

Powerful HTML5 and CSS3 techniques you can use today!