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:

/* Empty Elements */
.debug div:empty, .debug span:empty,.debug li:empty,.debug p:empty,.debug td:empty,.debug th:empty { 
    padding: 10px; 
    border: 2px dotted yellow !important;
}

/* Empty Attributes */
.debug *[alt=""], .debug *[title=""], .debug *[class=""], .debug *[id=""], .debug a[href=""] { 
    border: 2px solid orange !important;
}

/* Deprecated Elements */
.debug applet, .debug basefont, .debug center, .debug dir, .debug font, .debug isindex, .debug menu, .debug s, .debug strike, .debug u {
    border: 2px dotted red !important;
}

/* Deprecated Attributes */
.debug *[background], .debug *[bgcolor], .debug *[clear], .debug *[color], .debug *[compact], .debug *[noshade], .debug *[nowrap], .debug *[size], .debug *[start],.debug *[bottommargin], .debug *[leftmargin], .debug *[rightmargin], .debug *[topmargin], .debug *[marginheight], .debug *[marginwidth], .debug *[alink], .debug *[link], .debug *[text], .debug *[vlink],.debug *[align], .debug *[valign],.debug *[hspace], .debug *[vspace],.debug *[height], .debug *[width],.debug ul[type], .debug ol[type], .debug li[type] {
    border: 2px solid red !important;
}

/* Proposed Deprecated Elements */
.debug input[type="button"], .debug big, .debug tt {
    border: 2px dotted green !important;
}

/* Proposed Deprecated Attributes */
.debug *[border], .debug table[cellpadding], .debug table[cellspacing] { 
    border: 2px solid lime !important;
}

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

document.documentElement.className += " debug";

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 dauid.us (and his students think he's pretty boss).
© 2008-2020, dauid.us