Reference website:


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: – view the source code. In this example, I am employing Hue, saturation, luminosity, and alpha similar to an example provided by the 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 *