Shims, Shivs and Polyfills
Shims and shivs are small libraries that fill gaps in a platform
- Mainly used when API changes and cause compatibility issues
- The older API can still be supported by a thin compatibility layer on top of the newer code
Polyfills are similar concept to shims/shivs
- They provide fallback functionality for features still not implemented natively in the browser
- When the user update their browser they will have the same experience, but use native implementation
Shivs and Shims make HTML5 things happen in less supported browsers. They fill the gaps in:
- HTML – markup features, new tags, meta tags, ect…
- CSS -style properties, gradients, fonts,embedding, data-urls, ect…
- JavaScript – storages, web workers, canvas, SVG, ect…
HTML5 SHIVS
html5shiv.js is the most used shiv for HTML5 elements. It enables styling for HTML5 elements in older versions of IE (IE8-)
CSS3 PIE
CSS3 PIE is a polyfill for IE. It enables CSS3 features in older versions of IE. To make it work you need to:
- Download pie.js and pie.htc
- Include pie.js into the web page
- Add the following to the styles
behavior: url(scripts/css3-pie/pie.htc);
Array.indexOf() Shim
Some browsers do not support Array.indexOf(). We need to include a shim to make it happen:
if(!Array.prototype.indexOf){
function arrayIndexOf(searchElement, fromIndex){
for(var i = fromIndex || 0; i < this.length; i++){
if(this[i] === searchElement){
return i;
}
}
return -1;
}
Array.prototype.indexOf = arrayIndexOf;
}
You don't need to use exactly the same shim as in the example. There are lots of Array.indexOf() Shim in internet and they all do the same thing.
Audio/Video
Playing audio or video with pure HTML. It is available since HTML5. The most common approach is to use external plugin to fallback the audio/video support - like flash or silverlight.
The Modernizr framework
Modernizr is JavaScript library that detects HTML5 and CSS3 features in the browser - Modernizr
Modernizr has three primary tasks:
- Enable html5shiv if necessary
- Detects HTML5 support through adding classes to the HTML element
- YepNope loading
On document load Modernizr detects which features are supported and add classes to the HTML element - canvas, cssgradents, sessionstorage, ect.
Boiler Plates
Boiler plates deliver a ready-to-use CSS style reset.
*{margin:0px;padding:0px;}
html,boy,div,header...{margin:0px;padding:0px;}
Usage of predefined large Boiler Plates will slow down loading speed of your page. Boiler Plates are good thing but it is preferably to use custom css to reset style.
In conclusion, most wise will be use of Modernizr framework in combination with some custom reset css.