Video: Using ModernizrThis is web development, so we'll be working with browsers with different feature sets for a long time to come. And though we can rank most ECMAScript 3 without caring much about browser differences, if you're going to be an early adopter of HTML5 features, it really does become an issue, and there's a great library you should take a look at that will help you build those HTML5-focused apps while staying aware of backwards compatibility. It's called Modernizr. It allows you to do easy feature detection of both HTML5 and CSS3 features.
Viewers: in countries Watching now:
- Creating variables, functions, and loops
- Writing conditional code
- Sending messages to the console
- Working with different variable types and objects
- Creating and changing DOM objects
- Event handling
- Working with timers
- Building smarter forms
- Using regular expressions
This is web development, so we'll be working with browsers with different feature sets for a long time to come. And though we can rank most ECMAScript 3 without caring much about browser differences, if you're going to be an early adopter of HTML5 features, it really does become an issue, and there's a great library you should take a look at that will help you build those HTML5-focused apps while staying aware of backwards compatibility. It's called Modernizr. It allows you to do easy feature detection of both HTML5 and CSS3 features.
So modernizr.video, modernizr.audio, modernizr.canvas, modernizr.draganddrop. Run it on one browser, you may get a whole bunch of true results; and run it on a different browser, you made a couple of true and a lot of false ones. What we can then do is just write code that asks if modernizr.video, then yes we have support for it. We can generate some HTML5 video elements. If that's false then perhaps we can generate some flash video elements instead.
This will be the concept of progressive enhancement. If the user has that feature, we will enhance the site with it; if not, we might do nothing, or we might fall back to an alternate method, but what won't do is give them something that's broken. If you download the full version of Modernizr from modernizr.com, it allows you to check for every feature in HTML5 and CSS3, and it would be very unusual for me to actually need this. So once I know exactly the features that I'm looking for, I can go back and go to their Production section where I can just configure a custom build and generate a smaller version with the exact checks that I need. So, for example, if I am only interested in drag-and-drop and HTML5 audio support, I can then tell it to generate that file, and I just get the much smaller piece of code here that I can use to say true or false for just those particular features.
Modernizr does not, of course, give you these abilities if they're missing; it's simply a very straightforward way to see if they're supported. If you do want to get into more advanced uses, it can help you load in what I preferred to shims and polyfills, which are ways of detecting a missing feature and then trying to load in some alternate code to emulate that feature, but that is certainly beyond the scope of this course.