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;
}

/* 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";

1	document.documentElement.className += " debug";

Client Login

Stay in the Loop:

Debug Element Classes for Standards Compatibility