Modernizr

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. Modernizr makes it easy for you to write conditional JavaScript and CSS to handle each situation, whether a browser supports a feature or not.Taking advantage of cool new web technologies is great fun, until you have to support browsers that lag behind.It’s perfect for doing progressive enhancement easily.
Modernizr runs quickly on page load to detect features; it then creates a JavaScript object with the results, and adds classes to the html element for you to key your CSS on. Here is a nice article on Taking Advantage of HTML5 and CSS3 with Modernizr.

Please keep in mind, that Modernizr doesn’t actually magically enable these properties for browsers that don’t support them. It just tells the page whether that feature is supported on the browser the visitor is using or not.
You can download this javascript library from here.
To implement modernizr,
First step: include the library

script src="js/modernizr-1.0.min.js"
Second Step: include on your html tag a class of "no-js" (Not mandatory)

html class="no-js">

class="no-js"
NOTE:-
If You try to use such a class while havin a HTML or XHTML Doctype it won’t validate. But if You use the HMTL5 Doctype declaration there is issue on that. Intrestingly, If you have a look into the HTML5 specification You will find that the class attribute is allowed on the html element.


We have to add this tag because that will be the default state of the page. If JavaScript (js) isn’t on, then Modernizr won’t work at all so it’s good that we have a fallback for that case.

If JavaScript is indeed enabled, once that page is loaded on the browser, that class will be replaced dynamically and it may look something like this:rgba hsla no-multiplebgs borderimage (You  can find these classes in the html tag by checking the source code)

What does this mean?
For Firefox 3.5., this browser (sadly) doesn’t support multiple backgrounds, CSS gradients or CSS transforms, therefore,
Modernizr outputs:
"no-multipebgs", "no-cssgradients" and "no-csstransforms". On the other hand, it does support canvas and border-radius, which explains "canvas" and "borderradius". Etc.
Using Modernizr, your CSS will look instead like this:

#nice {

background: url(bg-1.png) top left repeat-x;

}

.multiplebgs #nice {

background: url(bg-1.png) top left repeat-x,

url(bg-2.png) bottom left repeat-x;

}

---

We can also detect features using Modernizr in your JavaScript, using this syntax:

---

if (Modernizr.geolocation) {

// code using geolocation api goes here.

}

else

{

// fallback strategy comes here.

}

---

We can’t rely on the fact that browsers support the full spectrum of features we want to use, this is the best tool out there to provide for both worlds.
Modernizr is good but not always needed. The simple multiple backgrounds effect in this post above for example can be achieved without it. In one css rule you can declare the widely supported CSS2.1 single image background style, then directly afterward declare the advanced CSS3 rule with multiple images.
Like this:

---

#nice {

background: url(bg-1.png) top left repeat-x;

background: url(bg-1.png) top left repeat-x,

url(bg-2.png) bottom left repeat-x;

}

---

Older browsers will not understand the second statement and so ignore it, CSS3 supporting browsers will use the cascade and apply the second rule. Your page is progressively enhanced and no js is required.
There are still some features which go undetected with modernizr. For that please refer this.