Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Okay, so we know HTML5 is a huge specification and we know that some parts are more mature than others. Well, this leads to two rather obvious questions. What can I use now and what level of support do browsers offer for HTML5? First off, I want to mention that there are two problems with discussing current HTML5 browser support. At the moment HTML5 implementation is changing so rapidly that this movie will be obsolete the moment I finish recording it. Not to mention that dissecting every HTML5 feature in the shades of support that they enjoy in various browser versions would take much longer than the time that I have here.
With that in mind, in this movie I want to discuss the various levels of browser support for some of the major features of HTML5, and then give you a list of online resources that can help you keep up with HTML5 support and feature detection. Also I want to point out that the table that we are going to look at right here is greatly simplified. Many of the new features of HTML5 have varying degrees of support or implementation based on the browser. Don't assume, for example, that because canvas is listed as being supported by Opera 9 means that all things canvas are available to you.
As you can see from this table, although most modern browsers support a large portion of the new HTML5 features, support is often partial. You've probably already noticed that Internet Explorer doesn't offer much in the way of HTML5 support at all. Microsoft has pledged to introduce significant support for HTML5 in Internet Explorer 9, so that is certainly a step in the right direction. Obviously knowing your target audience and the capabilities of their browser is a significant factor in deciding when to use specific HTML5 features.
Thankfully there are some online resources that you can use when needing to explore HTML5 feature support in more detail. First, Wikipedia has a page comparing layout engines and their support of HTML5. While it's a very thorough listing, I've found it's not always up-to-date and often lists the nightly build instead of noting earlier version support. findmebyip.com has a web designer's checklist that lists support for certain HTML5 features as well as CSS3 properties.
The list isn't as comprehensive as some but it does a nice job of comparing the Windows and Mac versions of the browsers. Interestingly enough Microsoft has one of the best browser comparison charts out there. The IE 9 Test Center compares the future IE 9 release against other major browsers. As you can guess, Internet Explore 9 comes off rather well in these comparisons and not all features are listed but the ones that are have a nice amount of detail, which allow for a side-by- side comparison of specific methods.
caniuse.com has a helpful chart of various specifications and capabilities including HTML5. You can filter the results and see the resulting browser support based on what you have searched for. Each category also features links to demo pages, articles, and test pages of the various features. If you want to test your user agents specifically you can go to html5test.com, which will test and then score your browser based on its HTML file support.
findmebyip.com also features similar capabilities on its homepage, listing not only your IP and current browser but its support for various CSS3 and HTML5 capabilities. If anything this brief overview of HTML5 support shows how very current levels of support are, and how difficult it can be to add HTML5 capabilities to your projects by targeting a specific browser. Instead I recommend considering adding HTML to your projects through progressive enhancement.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101370 Viewers
61 Video lessons · 88126 Viewers
71 Video lessons · 71965 Viewers
56 Video lessons · 103789 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.
Your file was successfully uploaded.