In the last two years, I’ve taught HTML5 to over 3000 students through my online class, even more than that have learned HTML5 and HTML5 mobile development through my last two books:WebKit for Dummies and Beginning HTML5 and CSS3 for Dummies, and I’ve personally tutored, assisted, and encouraged hundreds more to upgrade their HTML skills or to learn HTML for the first time.
After spending at least half of my career in the long dark Web period from 2001 to 2009 which was dominated by XHTML and browser wars, I’m thrilled to be a part of the HTML5 revolution that’s currently taking over the web.
According to the W3C’s plan, 2014 is the year that HTML5 will become an official recommendation. Whether or not it’s an official standard doesn’t matter, however, if it doesn’t have support from the browser makers. So, let’s take a look at the current level of browser support for HTML5 and related standards.
Here are a couple images that we all need to be familiar with. The first is from HTMLtest.com, a site that ranks browsers based on how well they support the HTML5 spec. The highest possible score is currently 555.
The next chart is from W3Counter.com, which tracks current browser usage. Here are the numbers from November 2013:
While it’s great news that browsers that are highly compliant with the HTML5 standard represent nearly 50% of the market share, it’s troubling that browsers that are so far behind as IE9 and older still account for about a quarter of all browsers in use today.
So, what are we to do about this? Here are our recommendations for web developers (and those who employ web developers) everywhere:
1. Write all web pages in HTML5, according to the latest version of the spec. Browsers are continually getting better, and even the most late of late adopters are gradually graduating to better browsers. When you’re feeling down, notice the complete lack of a certain version of a certain browser from Microsoft on the above chart!
2. Learn about and use Modernizr and Polyfills for any feature that might not be supported by every browser. Modernizr is a JavaScript library for detecting whether a user’s browser supports features. Polyfills are JavaScript replacements for HTML5 features which you can load conditionally based on the test results from Modernizr. For example, if you want to use the HTML5 video tag on your site, but you don’t want to leave behind users with old browsers, simply test for <video> support and include one of the several <video> polyfills. You can then use <video> as you normally would…the polyfill will take care of the rest! It’s like magic, except it’s not.
HTML5 represents a major improvement to the web, and it holds the promise of reducing and perhaps even eliminating browser incompatibilities at some point. But, not just yet. In the meantime, however, it’s fully possible to support nearly every user of your site and to smooth over browser incompatibilities by using simple and free tools. So, why wouldn’t you?
Sincerely,
Chris Minnick
p.s. A new session of my online class, Creating Mobile Apps with HTML5 just started!Visit our site to sign up or to view the first lesson!