PROGRESSIVE ENHANCEMENT WITH CSS SUPPORT
Via John Resig we just got to learn about a clever technique applied by the Filament group in Boston called Progressive Enhancement with CSS support.
The study rightfully claims that object detection to determine whether a user agent is capable of supporting a certain interface is not enough. You also need to make sure that the browser supports the right look and feel - in other words that the CSS you will apply can be rendered as intended.
I've done similar things in the past, reading out the offsetWidth of an element to determine if the browser is in standards or Quirksmode but Filamentgroup's test script goes a lot further than this. It tests for the following CSS support:
- Box model: make sure the width and padding of a div add up properly using offsetWidth
- Positioning: position a div and check its positioning using offsetTop and offsetLeft
- Float: float 2 divs next to each other and evaluate their offsetTop values for equality
- Clear: test to make sure a list item will clear beneath a preceding floated list item
- Overflow: wrap a tall div with a shorter div with overflow set to 'auto', and test its offsetHeight
- Line-height (including unitless): test for proper handling of line-height using offsetHeight, primarily to rule out Firefox 1.0
For example the right box model support is tested with this script:
-
var newDiv = document.createElement('div');
-
document.body.appendChild(newDiv);
-
newDiv.style.visibility = 'hidden';
-
newDiv.style.width = '20px';
-
newDiv.style.padding = '10px';
-
var divWidth = newDiv.offsetWidth;
-
if(divWidth != 40) {document.body.removeChild(newDiv); return false;}
When the browser passes, the script adds an "enhanced" class to the body that you can use in your style sheet.
Neat idea and very defensive programming.