Modernizr

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

Internet Explorer 8 view

 

 

 

 

 

Here is the same page viewed in Firefox 4.

Firefox 4 same page

 

 

 

 

Note the difference in how the individual divisions display.

 

Leave a Reply

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