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.
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.
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.
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 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.
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!
Ways to Make Older Browsers HTML5 Compatible
- html5shiv (also known as html5shim)
- 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).
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:
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
include the following snippet inside "head" tag:
<!--[if lt IE 9]> <script src="dist/html5shiv.js"></script> <![endif]-->
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:
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.
<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.