Modernizr is a Javascript library that detects the features your browser can support, like HTML 5 and CSS3 .It let you manage what to do if the browser don’t show something in the right way.
This library use different approach than detect the browser type, it detects if the specific features are natively implemented. Modernizr aims to bring an end to the UA sniffing practice. Using feature detection is a more reliable way to establish what you can and cannot do in the current browser.

How to use it

First thing to do is to include it into your page “head” tag (download):

<script type="text/javascript" src="modernizr.js"></script>

Modernizr.load()

Modernizr.load is a resources loader (Js and CSS) that let you manage what to load. The sintax is pretty easy, is based on yepnope , an asynchronous conditional resource loader script.

Modernizr.load({
	test : Modernizr.canvas,
	yep : 'canvas.js',
	nope : ['no-canvas.js', 'no-canvas.css']
});

• test: here you put the condition of test.
  List of CSS features
  List of HTML5 features
• yep: if the condition is true you can load one or more js or css file.
• nope: if the condition is false you can load one or more js or css file.

Modernizr CSS

Modernizr also put classes to the “html” tag letting you handle how to show something directly from css.

This example show you how display a div with the shadow if the browser support the “box-shadow” property, otherwise is displayed with a border.

.box {
   border-bottom: 1px solid #666;
   border-right: 1px solid #777;
}
.boxshadow div.box {
   border: none;
   -webkit-box-shadow: #666 1px 1px 1px;
  -moz-box-shadow: #666 1px 1px 1px;
   box-shadow: #666 1px 1px 1px;
}

In the case of the browser supports it Modernizr will add the class “boxshadow” to the “html” tag so you can use it to distinguish if the property can be used.

Modernizr