Debug Element Classes for Standards Compatibility

I use this during my initial development cycle on new projects.  Essentially, we’re targeting elements and deprecated classes with some nifty CSS to give us a visual representation of those things we should change for browser compatibility.  Then, we’re applying a ‘debug’ class to the body element of each page on our site.  I’m sure I’ve left out a few deprecated classes, but it s start.

This is especially useful when trying to easily determine if a theme will fit your needs for cross-browser compatibility and W3C standards.

Place the following CSS at the end of your stylesheet:

Call this javascript either in your page header, or in a script file.

Dave focuses in WordPress UI Design and WordPress Plugin Development (some have labelled him a fanatic) but has hands in many other projects, including photography and music. He's never far from a computer... or an iPad (for testing purposes, of course). Don't even try to bother him during Premier League games, though... he's cheering way too loudly for a team destined to play second fiddle. Dave currently teaches courses in code and philosophy at California State University, Long Beach (well... from home for the foreseeable future) alongside his small business at But, every now and then, he steps outside to protest or give the dog a car ride.
© 2008-2020,