Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 100190 Viewers
56 Video lessons · 113191 Viewers
71 Video lessons · 82064 Viewers
131 Video lessons · 39378 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.