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 Winter 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). If you've been to a WordCamp in Southern California, he probably already knows who you are (or maybe not - he's terrible with names). Dave currently teaches courses at California State University, Long Beach alongside his small business at (and his students think he's pretty boss).
© 2008-2020,