Progressive Enhancement using EnhanceJS

The first time I read about designing with progressive enhancement, I was a bit confuse. So, I did a bit of digging around and I find it interesting. You can call Progressive Enhancement t a coding methodology and it is simple in theory: start with the basic and standard HTML only pages to ensure that any browser and device are able to render it in a usable way. Then, when the browser and device understand the style and script, enhance the page by adding the style and script layer.

The idea address concern from the 2 camps, the web developer and web designer. The designer wants to put the latest styles and technology to beautify the page while the developers concern about cross-browser and cross-device compatibility. By testing the browser capabilities, we can target which enhanced experience to layer into the page. One thing I learnt about progressive enhancement is you have think of the site in layer of enhancement, you must structure styles and script to ensure they are loaded proper order. That is the challenging part. 🙂

 The idea to progressively enhance the site is from the Filament Group and they developed a framework for testing those browser capabilities. The library is EnhanceJS.

EnhanceJS is a new JavaScript framework (a single 2.5kb JavaScript file once minified/gzipped) that automates a series of browser tests to ensure that advanced CSS and JavaScript features will render properly before they’re loaded to the page, enabling you to build advanced, modern websites without introducing accessibility problems for people on browsers that aren’t capable of supporting all advanced features. It’s designed to be easily integrated into a standard progressive enhancement workflow: just construct the page using standard, functional HTML, and reference any advanced CSS and JavaScript files using EnhanceJS to ensure they’re only delivered to browsers capable of understanding them.EnhanceJS is a new JavaScript framework (a single 2.5kb JavaScript file once minified/gzipped) that automates a series of browser tests to ensure that advanced CSS and JavaScript features will render properly before they’re loaded to the page, enabling you to build advanced, modern websites without introducing accessibility problems for people on browsers that aren’t capable of supporting all advanced features. It’s designed to be easily integrated into a standard progressive enhancement workflow: just construct the page using standard, functional HTML, and reference any advanced CSS and JavaScript files using EnhanceJS to ensure they’re only delivered to browsers capable of understanding them.

Let’s see how the concept work in code. In the script below, you see how the test work. If you pass the test you will get the “enhanced” styles and scripts. You can even have conditional test for IE. You no longer need to write those “complex” script find out the user agent and browser ‘s behaviors. It is clearner also.

<script type="text/javascript" src="enhance.js"></script> 
<script type="text/javascript">
 enhance({
  loadStyles: [
   'css/enhancements.css',
   {href: 'css/print.css', media: 'print'},
   {href: 'css/ie6.css', iecondition: 6}
  ], 
  loadScripts: [
   'js/jquery.min.js',
   'js/enhancements.js'
  ]
 });  
</script>

The other useful feature of the framework is it is extensible. You can add your own browser capability test. Btw, EnhanceJS does not test HTML5 features this is where the “add test” come handy. You can integrate EnhanceJS and Modernizr or write your own test for that. A simple example below;

<html>
<head>
  <title>
    2D drawing with Canvas
  </title>
  <script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
  <script type="text/javascript" src="js/enhance.min.js"></script>
 <!-- Application JS -->
 <script type="text/javascript">
 enhance({
  loadScripts: [ 'js/jquery-1.4.2.min.js', 'js/enhancements.js' ],
  addTests: {
   canvasSupport: function() {
    if (Modernizr.canvas) return true;
    else return false;
   }
  }
 });
 </script>

</head>
<body>
 Using EnhanceJS to check canvas. <br/>
 <div id="canvasPanel"></div>
</body>
</html> 

//source for enhancements.js
function draw() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  ctx.fillStyle = "rgb(200,0,0)";
  ctx.fillRect (10, 10, 55, 50);

  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
  ctx.fillRect (30, 30, 55, 50);
}

$(document).ready(function(){
 $('#canvasPanel').html('<canvas id="canvas" width="300" height="300"></canvas>');

 draw();
});
// end document ready

More info on the site:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s