Modernizr Vs InnerShiv

Hi,

Today I am discussing here about the Modernizr and InnerShiv. The topics we are going to cover are:

- Introduction
- Features
- Where to use?
- Links

Ok, so let's start the basic questions here - "what are these frameworks for and why we need it?"

INTRODUCTION

If you  are new to HTML5 than you are right place. HTML5 came with the most awesome tags to make our markup to finally be semantic. But all thanks to our dear IE browsers who don't understand HTML5 and if you make your first HTML5 website by using the tags like - Header, footer, section, aside etc and will open on IE you will get a heart attack.

Your website which is working fine on all modern browser is blowing on IE and your reaction will be  "WHY?? and HOW TO FIX IT??"

The answer or solution is Modernizr and InnerShiv.

These 2 plugins will help you to look same on IE as it is on modern browser, so, to get the HTML5 tag support on IE we use these plugins..

FEATURES

Although both plugin help you to give support of HTML5 tags on IE but still both have their own features and make them unique .

InnerShiv
InnerShivalso know as Tag-Detection plugin.It only have the functionality to detect the tag support on the browser and if that browser dont have the capability to identify the HTML5 tags it will help to identify that.


Modernizer
Modernizr id "Feature-Detection Plugin". Modernizr is much bigger and powerful than InnerShiv. It not only consider HTML5 but also consider CSS3 too.

As, in case with the HTML5 on old browsers same is with the CSS3, old browsers dont understand css3.

It not only help you to detect the support of the HTML5 tags but also helps to detect the features of CSS3 too.

WHERE TO USE?

If your project is very simple and don't have any css3 features implementation like - gradients, Border Radius, animations etc. but only have HTML5 support  than you should go with the InnerShiv.


If your project have CSS3 features usage like - gradients, text shadow, box shadow etc than you must use the Modernizr as it will detect the browser itself which don't support the CSS3 features and HTML5 tags.

It will append the classes on the body  of your page on the basis of the availability of the feature on that browser.If the browser dont have any particular feature supported it will add "no-" prefix before that property as a class and add to body of your page.

On basis of these classes you can now write your css and js that what will happen when particular feature is not supported.


LINKS:

http://modernizr.com/
https://code.google.com/p/html5shiv/

Happy Coding!!