Introduction
There has been a lot a discussion lately about using or not HTML5 right now or to wait for greater adoption of it, we are not going to have that discussion here, I’m taking side and say that it should be used right now and not wait for complete adoption and have some of the benefits of HMTL5 today and be prepared for tomorrow.
So you have decided to update or create your site to HTML5 like all the cool kids are doing, great. What now? This article will focus on all the necessary steps in order to make your site in HTML5 but still compatible with the older browsers, and to take advantage of all the features you want even if they are not implemented in all the majors browsers yet.
If you want the short version and can’t wait or don’t want to know the all thing you should go to Initializr that have everything pack up and ready to go, another option is Boilerplate that have all you’re going to need to set up your project.
Now if you want to know how to do it on your own, or want to understand how some of it work keep reading.
As you probably now HTML5 is not just html markup, it also encloses under the name all the new JS API and the latest version of CSS, CSS3. So you will have to check for all the availability of all of these things and to provide fallbacks for all of them.
Chapter 1 – The Markup
Let’s start with the markup of the page and move are way up, shall we. First let’s look exactly what are the new tags that we have available, there are quite a few and several seems very useful for any site, you are probably wanting to use them now, right? Now let’s look at the reality of the adoption in browsers, go I’ll wait.
Ready? Ok, so bad news right, we have a problem in our hands, adoption is not complete yet, and we have to deal with the old browsers as well. If you try the simplest approach, just write the markup to see what happens, you will get two different types of results:
- In all browsers but IE the nodes will get inserted in the correct order in the DOM with no default styling, but it will let you give it any style you want.
- In all versions of IE prior to 9 the behavior towards unknown DOM elements was add them as an empty node, and all its children were added as siblings of the unknown element, as a second problem IE won’t let you add styling to the element.
Luckily there is a workaround for this problem up to IE6, if you create the unknown element with JavaScript, IE will start to let you use it and give it style.
<html>
<head>
<style>
article { display: block}
</style>
<script>document.createElement("article");</script>
</head>
<body>
<article>
<h1>IE Unknown Element workaround example</h1>
<p>Some dummy text </p>
</article>
</body>
</html>Just creating the element once per page is enough to use it, and you don’t have to insert it into the DOM. To make it easier for the rest of us there is a written solution by Remy Sharp called html5shiv just adds this to your web page:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->Add that file in each page at the top not at the bottom because it should be run before the DOM is ready, or the tags in your HTML won’t get recognized in time. And with that the first (of many) problem is solved.
Canvas
Now let’s try to use some of the more multimedia specific tags and its APIs, let’s begin with the canvas element. First we need to know if canvas is supported in the browser, currently the only browser that doesn’t have canvas support is IE prior to version 9, to solve that you can use a JavaScript library called explorer canvas that lets you use canvas in IE with he majority of the functionality of it.
With this we have the canvas up and running, but if we want to detect if a particular API is present in the browser we should try it first, to do that we create a canvas in the DOM and if it is supported the getContext() method will exist, let’s see it in code:
function useCanvas(){
return !!document.createElement(‘canvas’).getContext(‘2d’);
}Then we try for the desired API in this case FillText:
function supports_canvas_text() {
if (!useCanvas()) { return false; }
var myCanvas = document.createElement('canvas');
var context =myCanvas.getContext('2d');
return typeof context.fillText == 'function';
}We can use that function to use that functionality and in case that is not there have a fallback but making such a function for every API we want to test is cumbersome fortunately there a great library that we can use for this and for much more called modernizr that is a feature detection script that let you check for the availability of native implementations for next-generation web technologies. Using it instead of the previous function:
if (Modernizr.canvastext) {
// its supported normal code
} else {
// fallback code
}We can use Modernizr to check for all of the new features in the browsers that can render or utilize them, and still have easy and reliable means of creating fallbacks (that you should decide and do) for the browsers that cannot.
Audio
The use of the tag audio is pretty straightforward you just have to name the source file and that’s it if you want to use the default controls of each browser.
<audio controls="">
<source src="test.mp3">
<source src="test.ogg">
</audio> Now for the fallback plan you can use flash or quick time, adding the embedded object inside the audio tag and that’s it for the most basic set up. Other way to go is using modernizr to check for audio support and add the flash player through JavaScript.
if (!Modernizr.audio) {
// add fallback flash to the DOM
}For a most comprehensive example visit HTML5Rocks or if you want a simple player to build on top of, check this one.
Video
The use of the video tag is very similar to the audio tag, the main problem with it is the lack of a codec standard across all browsers because of that you have to make several versions of the video with different codecs, webM, ogg and X264 are the most used and with those 3 you are pretty much covered, just as the audio tag the fallback is flash. Now what you are expecting, the example code:
<video width="854" height="480">
<source src="video.mp4">
<source src="video.webm">
<source src="video.ogg">
<object data="player.swf" width="854" height="504">
<param value="true">
<param value="always">
<param value="file=video.mp4">
<!--[if IE]><param value="player.swf"><![endif]-->
<img src="video.jpg" width="854" height="480" alt="Video">
<p>Your browser can’t play HTML5 video. <a href="video.webm">Download it</a> instead.</p>
</object>
</video>For a full demo of this and a more helpful description you should look at http://camendesign.com/code/video_for_everybody. If you don’t want to get into the specifics and wants a pre created solution you should check http://praegnanz.de/html5video/ there is a great comparison between some of the more popular solution out there.
Forms
One of the aspects that have been greatly improved in HTML5 are the forms, including new input types , new form elements and some new form and input attributes. As with the previous elements that we have seen the main problem is adoption and the older browsers.
The good news here is that if use the new input type as mail or url the browsers that do not have them yet will treat them as text inputs so the page will not break, but we have to keep doing the validation with JavaScript as always, so you can change your input types in your current page and the final user will not see the difference, but your page will be ready for the future. To see if the input type is supported by the browser so you won’t load unnecessary JavaScript you can use modernizr. The same can be said about the input attributes if you use them and the browser don’t have support for it, the browser will ignore it and that’s it .
Example of detection with Modenizr:
<!-- In your HTML: -->
<input>
// In your JavaScript:
if (!Modernizr.inputtypes.date){
// if no native support, use a datepicker script
createDatepicker(document.getElementById('birthday'));
}
//For input attributes
// if placeholder isn't supported:
if (!Modernizr.input.placeholder){
// use a input hint script
setInputHint(document.getElementById('username'),'Enter Username');
}Finally I highly recommend that you read http://diveintohtml5.org/forms.html for a more complete documentation about this, and the entire book if you are interested in learning more about HTML5.
We’ll continue with this in chapter 2 to see what we can use of CSS3 and how. See you then.