I came across this article from the folks at Filament Group last week and have been considering it as an augmentation of my progressive enhancement approach to front-end development.

The idea is that you use JavaScript to manipulate the DOM to test for correct implementation of some advanced CSS stuff (box model, positioning, floats, overflow). If the browser passes, then it gets an enhanced version; if it fails, then it gets a basic version. You can do the version selection via an alternate stylesheet or with the use of ‘enhanced’ class before all the rules for the advanced view (or both).

As you’ll notice in the comments, there is some discussion about browsers that have JavaScript disabled but can still handled advanced CSS. I’m not convinced that disabled JavaScript removes a browser from Grade A status, but you could read the description of Grade A as including support for JavaScript. Regardless, it’s something worth considering, especially as sites morph into applications more and more. Certainly, if you’re using one of the JavaScript frameworks on your site, you’re limiting yourself to the browsers that past these tests since you need a browser with solid understanding of the DOM.

John Resig of jQuery fame posted a response to this method on his site.