In the past couple of years the web industry has seen a sudden boom in regards to HTML5. Although technically for the full specification to get approved we'll have to wait till the end of 2014, this is not stopping developers from writing codes in HTML5. Most, if not all, modern browsers have done a more or less good job in implementing the features of HTML5 (we all know which one doesn't!).
Unfortunately not all browsers have been able to implement all the new features that HTML5 is offering. So the developers often have to pay some extra care to make their code compatible with older browsers. In this article I'll try to point out some ways by which we can make older browsers compatible with HTML5. A little heads up though, this is about making browsers compatible with HTML5, not CSS3 (actually some aspects described are related to both, but our target is HTML5).
Getting to Know the Browsers
Before we get into making our code compatible and all that, we first need to have a clear idea on what actually the browsers can do. After all, what's the point of trying to teach someone what he/she already knows, right? Much to our advantage, there are some great sites which offer us considerable insight on browser features.
- FindMeByIP
On this site you'll find several charts where you can see a list of HTML5 features (and also CSS3) and info about which browser supports what feature. You can actually do it two ways, you can go to fmbip.com, in which case you'll get the info on the browser you are visiting the url by; or you can go to findmebyip.com/litmus, in which case you'll get a list of info on opera, chrome, mozilla, safari and IE versions 6, 7, 8, 9. 
- CanIUse
This site also has a comprehensive listing of compatibility info (color coded, always helps). You can search for a particular feature or just skim through all that are listed. This is actually one of the sites I have been frequently visiting since I first started coding in HTML5 and CSS3. - HTML5Please
This site is a bit different than the previous two. It does not contain a pin pointed list of what each browser can do, rather it gives us suggestions about what measures we should take regarding various features: whether we should totally avoid, use backup (i.e. polyfills, more on this later), use with caution or freely use a particular feature. According to the front page of this site, the recommendations are based on the experience of web developers. So it can turn out to be really handy in practical usage. - Browsershots
Browsershots makes screenshots of your web design in different operating systems and browsers. Not really informative, but to have a quick glimpse of what our page will look in different browsers, quite an impressive site. - Spoon.net
I personally think this is an awesome site. The Spoon.net Browser Sandbox provides us a method of cross-browser testing. All we have to do is just click run for any browser from the given list to launch it instantly. By the way you have to have an account to use its feature, and guess what, account creation is free!
Now that we know we can thoroughly investigate abilities of various browsers, let's get them compatible with HTML5. One thing that you'll see in common in most of these methods is the use of JavaScript. Let's list our options first and then we'll start cracking them one by one.
Ways to Make Older Browsers HTML5 Compatible
- Pure ol' JavaScript
- html5shiv (also known as html5shim)
- modernizr
- HTML5 Boilerplate
- Google Chrome Frame (especially for IE)
Before I proceed further, I'd like to make one thing very clear: using the above mentioned ways does not make our browser all of a sudden capable of implementing all the features that HTML5 offers, in most cases it just makes the browser recognize that there is a tag with a specified name. For example, using the first 3 ways you can make older browsers know that there is a tag named 'canvas', but you can't really perform actions which canvas really offers (note: I am saying HTML5 Boilerplate supports canvas because it actually makes IE render web pages using Google Chrome Frame, which happens to support canvas).
Custom JavaScript
This is the elementary way of letting the browser know what new tags we are going to use if it is not familiar with them already. Say for example we want to use the tag "header". This is a tag which IE versions prior to 9 don't understand. So here's what we can do:
<!--[if lt IE 9]>
<script type="text/javascript">
document.createElement("header");
</script>
<![endif]-->
It goes without saying that we have to place the piece of code between the "head" tags. The code snippet is quite self explanatory; even then, let's have a quick look at it. At the very first line we are starting a commented section, which basically says if the browser is less than IE version 9, interpret the following code; otherwise ignore what's in between the "if - endif" tags. Inside the script tags, we just have to call the createElement() function with the appropriate parameter. As an instance, if we also wanted to use "nav" tag we would have added the statement document.createElement("nav") in between script tags.
html5shiv
As stated before, it's also known as html5shim. So what is a shim? It is an application compatibility workaround (for those of you who have already googled it, yup, I took it from wikipedia). html5shim is one of the most popular polyfills (remember I stated the term "polyfill" previously? here it comes!). Paul Irish gave a simple definition of polyfills. If you are wondering who is Paul Irish, just know that he is sort of a front-end wizard in web industry. According to him polyfill is “a shim that mimics a future API, providing fallback functionality to older browsers”. You can download html5shiv here.
In case you are interested in technicalities, html5shiv sort of works by following the first method described i.e. creating element through JavaScript. After you download it, all you need to do is include the following snippet inside "head" tag:
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
modernizr
A really worthy name, it does make us modern (at least in regards to front-end development, that's for sure!). The best place to learn about modernizr is its official site. But don't worry; I'm not leaving you empty-handed. In short, what modernizr does is perform feature detection first. Note that I said "feature" detection, not "browser" detection. That basically means it finds out what our browser can do, not what browsers we are using. It then attaches necessary classes to our "html" tag. Say for example our browser does not support "canvas" tag, so a class named "no-canvas" will be added to our "html" tag. In the opposite case the class added would have been "canvas". So what do we do to use modernizr? Same as before, we download a copy of modernizr.js (you can find a link in the official site) and add the following code inside "head" tag:
<script src="js/modernizr.js"></script>
It's worth noting that we can use modernizr to detect feature within our JavaScript, such as:
if(Modernizr.geolocation){
}
HTML5 Boilerplate
This is what I'd like to say is the ultimate blueprint. The package contains modernizr and jquery library. It also has normalize.css (I left out normalize from previous descriptions as it is related to CSS). You can find a link to download html5boilerplate from its website. Once downloaded, if you explore the folder you'll find all the files I've previously mentioned. The index.html is where your html goes. To simply define, this is a template for implementing HTML5.
Google Chrome Frame (Abbreviated as GCF)
For those of you who are really frustrated with IE, I saved the best for the last. Google Chrome Frame is simply a plug-in for IE which lets it render a webpage the same way google chrome would. Of course the downside is you can't use the features not supported by google chrome, but trust me, the amount of such features is negligible compared to IE. As far as I know, chrome ranks the second in regards to adopting HTML5 features (Maxthon being first). You can check the current standings from the site html5test. We basically have to do two things to make a page be displayed using Google Chrome Frame in IE.
Firstly, we have to make sure that the viewer's IE already has the plug-in installed. Frankly speaking, there is no way to force the user to install GCF, but at least we can prompt the user to install it. The developer's site chromium.org gives a way to use a JavaScript file named "CFInstall.js" which exactly does that. You can find an example of using "CFInstall.js" here. For your convenience I'm presenting the code below:
<html>
<body>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<style>
/*
CSS rules to use for styling the overlay:
.chromeFrameOverlayContent
.chromeFrameOverlayContent iframe
.chromeFrameOverlayCloseBar
.chromeFrameOverlayUnderlay
*/
</style>
<script>
// You may want to place these lines inside an onload handler
CFInstall.check({
mode: "overlay",
destination: "http://www.waikiki.com"
});
</script>
</body>
</html>
Secondly, we have to give instructions to our page to use GCF. We do this by adding the following simple meta inside "head" tag:
<meta http-equiv="X-UA-Compatible" content="chrome=1">
HTML5 Cross Browser Polyfills
Remember I said taking certain measures as stated above will not actually make our browser able to use all the features provided by HTML5, but rather make our browser knowledgeable on the fact that there are certain tags? For those of you who became heartbroken, take a look at this site.. It provides a list of fallback options for HTML5 features.
Before I conclude I'd like to mention one thing. HTML5 is gaining popularity at a very high rate, and the browsers are also catching up nicely. After a few years I think there won't be the concept of making browsers "compatible with HTML5" (and sadly my so thoughtful article will become obsolete). But till then, we certainly have to keep our eyes open and take necessary measures.
