Reference website: http://www.modernizr.com/
Documentation: http://www.modernizr.com/docs/
Usage: One must download the minified JavaScript library from the reference website above. Store the file in a scripts folder. Include a reference to the minified library using the <script> element. Also add a class=”no-js” to the <html> element. Now you are ready to try it out.
Example page: http://learning-html5.info/CSS3/CSS3_HSLAModernizr.html – view the source code. In this example, I am employing Hue, saturation, luminosity, and alpha similar to an example provided by the lynda.com training library. Older browsers will not support these CSS-3 enhancements, so an alternative is employed for these older browsers. For example, if IE 6 is the browser, an alternate view is provided (not a perfect match but a similar look). If Chrome or FireFox 4 is used, the actual HSLA features are displayed. Be sure to view the source code to confirm you understand how this tool is used to provide graceful degradation.
Result: Below is a screen capture of a page using IE8
Here is the same page viewed in Firefox 4.
Note the difference in how the individual divisions display.
Loading ...