Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In HTML5 First Look, author James Williamson introduces the newest HTML specification, providing a high-level overview of HTML5 in its current state, how it differs from HTML 4, the current level of support in various browsers and mobile devices, and how the specification might evolve in the future. Exercise files accompany the course.
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.
There are currently no FAQs about HTML5 First Look.
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.