@charset "UTF-8"; /** * O * \ HOLMES * * ------------------------ * * Holmes is stand-alone diagnostic CSS stylesheet that will highlight * potentially invalid or erroneous HTML(5) markup * * @author Luke Williams * @author_url http://www.red-root.com * @project_url http://github.com/redroot/holmes/ * @version 1.0.1 (25/04/2011) * * @copyright Copyright Luke Williams 2011- * * @modified October 17, 2013 * -- Changed debug class from "holmes-debug" to "dev-debug" * * ------------------------ * * How does it work? * * Adding the class 'dev-debug' to any element, ideally the body or html tag, * will set debug styles for any elements within that element. * * e.g.: * * * ------------------------ * * Debug colours and what they mean * * - RED denotes an error, invalid markup or a missing attribute * - YELLOW denotes a warning, so potentionally erroneous markup or bad practice * - DARK GREY denotes a deprecated element or element with deprecated or Non-W3C attributes * * ------------------------- * * Notes * * - I have chosen to keep all separate types of diagnostis separate, despite sharing * common CSS styles, to maintain readability * */ /************** LINKS **************/ .dev-debug a:not([href]), .dev-debug a[href=""] { outline: 3px solid red; } .dev-debug a[href="#"], .dev-debug a[href^="javascript"], .dev-debug a:not([title]), .dev-debug a[title=""]{ outline: 3px solid #fd0; } /************** IMAGES **************/ .dev-debug img:not([alt]), .dev-debug img[alt=""] { outline: 3px solid red; } /************************* MISC ATTRIBUTES **************************/ .dev-debug label:not([for]), .dev-debug label[for=""], .dev-debug input:not([name]), .dev-debug input[name=""], .dev-debug select:not([name]), .dev-debug select[name=""], .dev-debug textarea:not([name]), .dev-debug textarea[name=""], .dev-debug abbr:not([title]), .dev-debug abbr[title=""], .dev-debug [class=""], .dev-debug [id=""] { outline: 3px solid red; } /* .dev-debug table:not([summary]), .dev-debug table[summary=""]{ border: 3px solid red; } */ /* Warnings here, for inline styles and event calls, ideally they should be external (CSS) and JS applied by JS scripts, keep markup purely presentational! (not sure about the js yet) */ .dev-debug [style]/*, .dev-debug [onclick], .dev-debug [onblur], .dev-debug [onfocus], .dev-debug [onselect], .dev-debug [onload], .dev-debug [onunload] */{ outline: 3px solid #fe01ef; } /************************************************************************* DEPRECATED & NON-W3C CONTENT ELEMENTS (darkgrey) Based largely on http://www.w3.org/TR/html5/obsolete.html#obsolete *************************************************************************/ .dev-debug applet, .dev-debug acronym, .dev-debug center, .dev-debug dir, .dev-debug font, .dev-debug strike, .dev-debug u, /*.dev-debug i, apparently not deprecated .dev-debug b, apparently not deprecated */ .dev-debug big, .dev-debug tt, .dev-debug marquee, /* i've left this is because its naff bascially */ .dev-debug plaintext, .dev-debug xmp { border: 3px solid darkgrey; } /************************************************************************ DEPRECATED NON-W3C ATTRIBUTES (darkgrey) Based largely on http://www.w3.org/TR/html5/obsolete.html#obsolete ************************************************************************/ body.dev-debug[bgproperties], body.dev-debug[topmargin], body.dev-debug[rightmargin], body.dev-debug[bottommargin], body.dev-debug[leftmargin] { outline: 3px solid darkgrey; } .dev-debug *[bordercolor], .dev-debug *[bordercolordark], .dev-debug *[bordercolorlight], .dev-debug table[frame] { border: 3px solid darkgrey; } /********************* EMPTY ELEMENTS (warning level for now) **********************/ /* .dev-debug div:empty, .dev-debug span:empty, .dev-debug li:empty, .dev-debug p:empty, .dev-debug td:empty, .dev-debug th:empty { border: 3px solid #fd0; } */