HTML5: Get It Working Today (4 of 4)

This will be the final article in our series on HTML5. This go around we’ll have a brief look at which new HTML5 technologies major browsers are officially supporting and go over some techniques you can use to take advantage of the new elements in your coding today. Finally, we’ll discuss how you should start preparing to support HTML5 in all the sites you build from here forward.

What Features Are Major Browsers Officially Supporting?

For the purpose of this article, we’ll define “official support” as listed in the documentation from the browser’s developer. This will ensure that no hacks or tricks are required to use the new features and will instead focus on native implementation straight from the source (feel free to add your own commentary based on the results of your own tests!). With that in mind, let’s take a look at the current iterations of a few major browsers.

Firefox 3.5

Head over to the Firefox Developer Page and you’ll see a brief description on HTML5 support. Here’s a list of supported features:

  • audio element
  • video element
  • canvas element
  • Offline resource specification
  • Drag and Drop API

Safari 4

The Safari 4 features list mentions support for the following features:

  • audio and video elements (and associated API)
  • canvas element (actually created by Apple for Dashboard)
  • Offline Application Support

Internet Explorer 8

Though the Internet Explorer Developer Center claims “strong support” for HTML5, there doesn’t seem to be any support for the canvas element (probably due to Silverlight), audio/video elements, or the offline application API. Here’s a complete list of IE 8’s supported elements, none of which seem to be exclusively from HTML5. I did however, find mention of support the new Cross-Document Messaging API. Feel free to share any resources you have on HTML5 support in IE 8 using the comments below.

Opera 10

Opera’s developer site posted an article about HTML5 in January containing existing support. Here are the features that article lists as currently supported by Opera 10:

  • video element
  • canvas element
  • Cross-document messaging
  • Server-sent events
  • Web Forms 2.0

Further, here’s a report on current web specifications supported in Opera Presto 2.3 (Opera’s rendering engine).

Google Chrome

Unable to find an official list straight from Google, I was forced to turn to an O’reilly article outlining a speech made by Google’s VP of engineering on HTML5 and the future of web technologies. In his speech, Vic Gundotra listed the these features as being supported by Google Chrome (as well as Firefox, Safari and Opera):

  • video element
  • canvas element
  • geolocation API
  • App cache (offline wep app API)
  • Database API
  • Web Workers (background thread processing)

Cheating

As you can see, even the browsers that have the most support for HTML5 still don’t natively support even half of the new features and elements we’ve discussed in recent articles. Which means using HTML5 today will not be as easy as simply throwing in the semantic changes that you’ve learned. What we’ll need is a way to create the new elements in HTML5 using only the widely used and supported web technologies of today. As it turns out, JavaScript offers a simple, native method for doing exactly this! By using document.createElement, we can make our own custom elements that conform to the specifications of those supported in HTML5. Sure it’s a bit of a hack, but it’s the closest thing you’ll get to getting your hands on all of the new elements in the near future. Let’s use the example from our previous article to see what this would look like.

<body>
	<aside>
		
		<p>General Info</p>
		<nav>
			<a href="">Home</a>
			<a href="">About</a>
			<a href="">Contact</a>    
		</nav>
		
		<p>Tutorials</p>
		<nav>
			<a href="">HTML5 Tuts</a>
			<a href="">CSS3 Tuts</a>  
		</nav>
		
	</aside>
	
	<section>
		<header>
			<h2>HTML5 Tutorials</h2>
			<p>Completely Free HTML5 Training</p>
		</header>
		<article>
			<h3>HTML Tutorial 1</h3>
			<p>Lots of good good information</p>
		</article>
		<article>
			<h3>HTML Tutorial 2</h3>
			<p>Lots of good good information</p>
		</article>
		<footer>6 hours of free tutorials!</footer>
	</section>
	
	<section>
		<header>
			<h2>CSS3 Tutorials</h2>
			<p>Completely Free CSS3 Training</p>
		</header>
		<article>
			<h3>CSS Tutorial 1</h3>
			<p>Lots of good good information</p>
		</article>
		<article>
			<h3>CSS Tutorial 2</h3>
			<p>Lots of good good information</p>
		</article>
		<footer>4 hours of free tutorials!</footer>
	</section> 
</body>

As you can see, this page uses the HTML5-only elements header, footer, article, aside, nav and section. All we have to do to get this to work is create those elements in JavaScript:

<script type="text/javascript">
       document.createElement('header');
       document.createElement('footer');
       document.createElement('section');
       document.createElement('aside');
       document.createElement('nav');
       document.createElement('article');
</script>

Voila! Now you can target those elements in CSS just as if they were native elements. Warning: this method can produce widely varied results and you should use at your own risk. If someone visits your site with JavaScript turned off, your CSS won’t take hold and your nice, pretty HTML5 website will look like it was attacked by Godzilla. However, this method is great for your own experimentation and should work with all major browsers.

Further Testing

In my own testing, both Safari and Firefox seemed to handle all of the new elements listed above without any JavaScript whatsoever. If you take a look at the code, you can see that Apple’s own Safari 4 about page uses several new HTML5 elements and only implements JavaScript in the case of Internet Explorer. Try this out on your browser and let us know what you come up with!

Preparing for HTML5

On his site, Jon Tangerine make the suggestion that we should start preparing ourselves for HTML5 by getting used the structure inherent in the semantic changes. What this means practically is fairly simple, use classes to mimic the structure of an HTML5 page. This method is not browser-specific, adheres to all currently popular standards, does not rely on scripting, and is super easy to implement. For example, we would take all of the header tags in the code above and convert them to

and use the normal class markup in for targeting in CSS.

Now, if you really want to properly prepare yourself for HTML5, don’t just go throwing the terms header, footer, section, etc. around. Force yourself to use these terms semantically, as if they were the actual HTML5 elements. First of all, this means using class instead of id where applicable. It also means adhering to the strict HTML5 guidelines in place for each element (outlined in the previous article). One example of this would be to only use a nav class on major navigational areas of a page and not for minor navigational links such as those found in a page footer.

5 Sites Using HTML5

Despite the fact that my official advice is that HTML5 won’t be ready for popular use for some time, I have to admire sites that are taking the initiative to usher in the future of web development by using HTML5 today. Here are five sites that do just that. Just click on a pic to view the site. Be sure to take a look at the code each developer used to get an idea of the structure of a few real world examples of HTML5. Also, if you’ve developed a site in HTML5, we want to see it! Leave a URL in the comments so we can check it out.

screenshot

screenshot

screenshot

screenshot

screenshot

Conclusion

Well that concludes our four part series on HTML5. We’ve gone over the basics, how to use a select few new elements, major semantic changes, and how to implement HTML5 right now. I hope you’ve learned a ton and are now more excited and less apprehensive about the future of HTML. Your feedback is instrumental in what articles we choose to write so tell us what you thought of the series and what you’d like to see us go over in the future.