Progressive Enhancement with CSS support
Date : 2008 03 15 Category : Tech & Development
AjaxianVia 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.0For example the right box model support is tested with this script:
PLAIN TEXT JAVASCRIPT: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.