When designing and coding sites, I like to keep ahead with latest coding standards and best practises whilst still maintaining support for older browsers that don’t yet have support for new tags or functionality that are available today in the latest browser releases. I’m not talking about nightly release support but browsers that have been fully tested and have been an official releases for at least 6 months.
As we know ADF is putting in HTML5 support into it’s latest PatchSets just take a look at DVT graphing for example that uses the HTML 5 <Canvas> tag.
Now; how does that work with Internet Explorer? Well they use a fallback to Flash as a lot of html5 tags aren’t supported by IE.
This is great!.. I can create my own TagLib to detect the browser and put in fallback support.
But what if you are a webdesigner with no knowledge of how to create your own tagLib and develop a html based template for WebCenter Portal or Spaces, that incorporates new functionality new tags unsupported by older browsers??
There is a Solution!
First “HTML5 Shim” also know more popularly as “HTML5 Shiv” coined by the jQuery Guru John Resig .
Whats the difference..
Answer: nothing, one has an m and one has a v – that’s it.
So what do they.. … … it.. … Do?
They are really a polyfill for browsers that do not support HTML5 tags.
I’ll come back to Polyfills later..
So essentially it’s a script that applies support for tags like <header>, <nav>, <figure> etc that make up html5 incorporating the correct styling and functionality.
Now when I create simple html5 based templates I incorportate Modernizr.
Modenizr includes html5 shiv/m but also provides detection on the browser for CSS3 and HTML5 elements handled all within Javascript..
This allows me to write CSS or Javascript files that can easily provide support or clean degredation for incompatible features.
Also you can choose to include the yepNope.js conditional loader that will load in polyfils to supply support for functionality not currently within a browser like localStorage..
Ok, but what is a polyfill?..
Simply a JS Library that integrates support for older browsers that don’t support the latest and greatest additions that are available in todays browsers.
Click here to check a list of polyfills that are available today!
One thing to note.. Although <canvas> makes up html5 it is not supported by html5 shiv/m and therefor requires a pollyfill fallback to something like flashCanvas or excanvas.
If your interested in the history of HTML Shiv/Shim Modernizr check out another Gurus Blog Paul Irish know for his HTML 5 Boilerplate.
Thats it.
Have fun incorporating and playing with Modernizr and Polyfills..
A Word of warning:: although I know Modernizr plays well with ADF I cannot guarentee that some of the polyfill addons will work..
