CSS Diagnostics

/* Empty Elements */ div:empty, span:empty, li:empty, p:empty, td:empty, th:empty { padding: 20px; border: 5px dotted yellow !important; } /* Empty Attributes */ *[alt=""], *[title=""], *[class=""], *[id=""], a[href=""], a[href="#"] { border: 5px solid yellow !important; } /* Deprecated Elements */ applet, basefont, center, dir, font, isindex, menu, s, strike, u { border: 5px dotted red !important; } /* Deprecated Attributes */ *[background], *[bgcolor], *[clear], *[color], *[compact], *[noshade], *[nowrap], *[size], *[start], *[bottommargin], *[leftmargin], *[rightmargin], *[topmargin], *[marginheight], *[marginwidth], *[alink], *[link], *[text], *[vlink], *[align], *[valign], *[hspace], *[vspace], *[height], *[width], ul[type], ol[type], li[type] { border: 5px solid red !important; } /* Proposed Deprecated Elements */ input[type="button"], big, tt { border: 5px dotted #33FF00 !important; } /* Proposed Deprecated Attributes */ *[border], a[target], table[cellpadding], table[cellspacing], *[name] { border: 5px solid #33FF00 !important; }
Find mistakes in HTML and highlight the crap out of them.

3 Responses

The <menu> element seems to get a comeback in HTML5 as context / popup / toolbar menu
https://html.spec.whatwg.org/multipage/forms.html#the-menu-element

But browser support is still very poor
http://caniuse.com/#feat=menu
Oh... and another thing. It's better to use the outline property instead of the border property to debug, because that won't break the layout.
Check out Pesticide for Chrome: https://chrome.google.com/webstore/detail/pesticide-for-chrome/bblbgcheenepgnnajgfpiicnbbdmmooh - it's similar but you can turn it on/off with a button.

Write a comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.