HTML5 and all browsers compatibility

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.

Leave a Reply

Your email address will not be published. Required fields are marked *