@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 * @contributors Anthony Mann (hover based debug info) * @author_url http://www.red-root.com * @project_url http://github.com/redroot/holmes/ * @version 1.0.1 (25/04/2011) * * Copyright (C) 2011 Luke Williams & RedRoot All Rights Reserved. * holmes.css HTML5 CSS Accessibility Validation * Licenced under GPL license * http://www.gnu.org/licenses/gpl.html * * ------------------------ * * How does it work? * * Adding the class 'holmes-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 * * - Getting pretty long so I've split it into outlines/borders and then Anthony's debug info, first * the style, then the content * */ /* ====================================================== */ /* = OUTLINES / BORDERS ================================= */ /* ====================================================== */ /************** LINKS **************/ /* Errors */ .holmes-debug a:not([href]), .holmes-debug a[href=""] { outline: 2px solid red; } .holmes-debug a[href="#"], .holmes-debug a[href^="javascript"], .holmes-debug a:not([title]), .holmes-debug a[title=""]{ outline: 2px solid #fd0; } /************** IMAGES **************/ .holmes-debug img:not([alt]), .holmes-debug img[alt=""] { outline: 2px solid red; } /************************* MISC ATTRIBUTES **************************/ .holmes-debug label:not([for]), .holmes-debug label[for=""], .holmes-debug input:not([name]), .holmes-debug input[name=""], .holmes-debug select:not([name]), .holmes-debug select[name=""], .holmes-debug textarea:not([name]), .holmes-debug textarea[name=""], .holmes-debug abbr:not([title]), .holmes-debug abbr[title=""], .holmes-debug [class=""], .holmes-debug [id=""], .holmes-debug table:not([summary]), .holmes-debug table[summary=""]{ outline: 2px 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) */ .holmes-debug [style]/*, .holmes-debug [onclick], .holmes-debug [onblur], .holmes-debug [onfocus], .holmes-debug [onselect], .holmes-debug [onload], .holmes-debug [onunload] */{ outline: 2px solid #fd0; } /************************************************************************* DEPRECATED & NON-W3C CONTENT ELEMENTS (darkgrey) Based largely on http://www.w3.org/TR/html5/obsolete.html#obsolete *************************************************************************/ .holmes-debug applet, .holmes-debug acronym, .holmes-debug center, .holmes-debug dir, .holmes-debug font, .holmes-debug strike, .holmes-debug u, .holmes-debug big, .holmes-debug tt, .holmes-debug marquee, /* i've left this is because its naff bascially */ .holmes-debug plaintext, .holmes-debug xmp { border: 2px solid darkgrey; } body.holmes-debug[bgproperties], body.holmes-debug[topmargin], body.holmes-debug[rightmargin], body.holmes-debug[bottommargin], body.holmes-debug[leftmargin] { outline: 2px solid darkgrey; } .holmes-debug *[bordercolor], .holmes-debug *[bordercolordark], .holmes-debug *[bordercolorlight], .holmes-debug table[frame] { border: 2px solid darkgrey; } /********************* EMPTY ELEMENTS (warning level for now) **********************/ .holmes-debug div:empty, .holmes-debug span:empty, .holmes-debug li:empty, .holmes-debug p:empty, .holmes-debug td:empty, .holmes-debug th:empty { border: 2px solid #fd0; } /* ====================================================== */ /* = MESSAGES STYLES ==================================== */ /* ====================================================== */ /* ================== */ /* = Warning Style = */ /* ================== */ /* - LINKS - */ .holmes-debug a[href="#"]:hover::after, .holmes-debug a[href^="javascript"]:hover::after, .holmes-debug a:not([title]):hover::after, .holmes-debug a[title=""]:hover::after, /* - EMPTY ELEMENTS - */ .holmes-debug div:empty:hover::after, .holmes-debug span:empty:hover::after, .holmes-debug li:empty:hover::after, .holmes-debug p:empty:hover::after, .holmes-debug td:empty:hover::after, .holmes-debug th:empty:hover::after, /* - MISC ATTRIBUTES - */ .holmes-debug [style]:hover::after { border-radius: 0.5em; display:block; padding: 1em; margin: 1em; background: #fd0; position: fixed; color: #000; left: 0px; top: 0px; z-index: 9999; } /* =============== */ /* = Error Style = */ /* =============== */ /* - LINKS - */ .holmes-debug a:not([href]):hover::after, .holmes-debug a[href=""]:hover::after, /* - IMAGES - */ .holmes-debug img:not([alt]):hover:after, .holmes-debug img[alt=""]:hover::after, /* MISC ATTRIBUTES */ .holmes-debug label:not([for]):hover::after, .holmes-debug label[for=""]:hover::after, .holmes-debug input:not([name]):hover::after, .holmes-debug input[name=""]:hover::after, .holmes-debug select:not([name]):hover::after, .holmes-debug select[name=""]:hover::after, .holmes-debug textarea:not([name]):hover::after, .holmes-debug textarea[name=""]:hover::after, .holmes-debug abbr:not([title]):hover::after, .holmes-debug abbr[title=""]:hover::after, .holmes-debug [class=""]:hover::after, .holmes-debug [id=""]:hover::after, .holmes-debug table:not([summary]):hover::after, .holmes-debug table[summary=""]:hover::after { border-radius: 0.5em; display:block; padding: 1em; margin: 1em; background: red; position: fixed; color: #000; left: 0px; top: 0px; z-index: 9999; text-decoration: none; } /* ===================== */ /* = Deprecated Styles = */ /* ===================== */ /* - DEPRECATED & NON-W3C CONTENT ELEMENTS - */ .holmes-debug applet:hover::after, .holmes-debug acronym:hover::after, .holmes-debug center:hover::after, .holmes-debug dir:hover::after, .holmes-debug font:hover::after, .holmes-debug strike:hover::after, .holmes-debug u:hover::after, .holmes-debug big:hover::after, .holmes-debug tt:hover::after, .holmes-debug marquee:hover::after, .holmes-debug plaintext:hover::after, .holmes-debug xmp:hover::after, .holmes-debug *[bordercolor]:hover::after, .holmes-debug *[bordercolordark]:hover::after, .holmes-debug *[bordercolorlight]:hover::after, .holmes-debug table[frame]:hover::after { border-radius: 0.5em; display:block; padding: 1em; margin: 1em; background: red; position: fixed; background: darkgrey; color: #000; left: 0px; top: 0px; z-index: 9999; } /* ================================ */ /* = Deprecated body style Styles = */ /* ================================ */ body.holmes-debug[bgproperties]:hover::after, body.holmes-debug[topmargin]:hover::after, body.holmes-debug[rightmargin]:hover::after, body.holmes-debug[bottommargin]:hover::after, body.holmes-debug[leftmargin]:hover::after { border-radius: 0.5em; display:block; padding: 1em; margin: 1em; background: red; position: fixed; background: darkgrey; color: #000; bottom: 0px; right: 0px; z-index: 9999; /* Bottom right due to whole body coverage */ } /* Fixes the case where a table may contain both errors and warnings - potentially other cases of this elsewhere */ .holmes-debug td:empty:hover::after, .holmes-debug th:empty:hover::after { top: 4em; } /* ====================================================== */ /* = MESSAGES CONTENT =================================== */ /* ====================================================== */ /************** LINKS **************/ .holmes-debug a:not([href]):hover::after, .holmes-debug a[href=""]:hover::after { content:'Missing href attribute'; } .holmes-debug a[href="#"]:hover:after{ content:"href='#'"; } .holmes-debug a[href^="javascript"]:hover:after{ content:'Href has javascript'; } .holmes-debug a:not([title]):hover::after, .holmes-debug a[title=""]:hover::after { content:'Missing title attribute'; } /************** IMAGES **************/ .holmes-debug img:not([alt]):hover::after, .holmes-debug img[alt=""]:hover::after { content:'Missing alt attribute'; } /************************* MISC ATTRIBUTES **************************/ .holmes-debug label:not([for]):hover::after, .holmes-debug label[for=""]:hover::after{ content:'Missing for attribute'; } .holmes-debug input:not([name]):hover::after, .holmes-debug input[name=""]:hover::after, .holmes-debug select:not([name]):hover::after, .holmes-debug select[name=""]:hover::after, .holmes-debug textarea:not([name]):hover::after, .holmes-debug textarea[name=""]:hover::after { content:'Missing name attribute'; } .holmes-debug abbr:not([title]):hover::after, .holmes-debug abbr[title=""]:hover::after { content:'Missing title attribute'; } .holmes-debug [class=""]:hover::after { content:'Blank class attribute'; } .holmes-debug [id=""]:hover::after { content:'Blank id attribute'; } .holmes-debug table:not([summary]):hover::after, .holmes-debug table[summary=""]:hover::after { content:'Missing summary attribute'; } .holmes-debug [style]:hover::after { content: 'Element has inline styles'; } /************************************************************************* DEPRECATED & NON-W3C CONTENT ELEMENTS (darkgrey) Based largely on http://www.w3.org/TR/html5/obsolete.html#obsolete *************************************************************************/ .holmes-debug applet:hover::after, .holmes-debug acronym:hover::after, .holmes-debug center:hover::after, .holmes-debug dir:hover::after, .holmes-debug font:hover::after, .holmes-debug strike:hover::after, .holmes-debug u:hover::after, /*.holmes-debug i, apparently not deprecated .holmes-debug b, apparently not deprecated */ .holmes-debug big:hover::after, .holmes-debug tt:hover::after, .holmes-debug marquee:hover::after, /* i've left this is because its naff bascially */ .holmes-debug plaintext:hover::after, .holmes-debug xmp:hover::after { content:'Deprecated or Non-W3C element'; } /************************************************************************ DEPRECATED NON-W3C ATTRIBUTES (darkgrey) Based largely on http://www.w3.org/TR/html5/obsolete.html#obsolete ************************************************************************/ body.holmes-debug[bgproperties]:hover::after { content:'Deprecated or Non-W3C body attribute bgproperties'; } body.holmes-debug[topmargin]:hover::after, body.holmes-debug[rightmargin]:hover::after, body.holmes-debug[bottommargin]:hover::after, body.holmes-debug[leftmargin]:hover::after { content:'Deprecated or Non-W3C body attribute *margin'; } .holmes-debug *[bordercolor]:hover::after, .holmes-debug *[bordercolordark]:hover::after, .holmes-debug *[bordercolorlight]:hover::after, .holmes-debug table[frame]:hover::after { content:'Deprecated or Non-W3C body attribute bordercolor'; } /********************* EMPTY ELEMENTS (warning level for now) **********************/ .holmes-debug div:empty:hover::after, .holmes-debug span:empty:hover::after, .holmes-debug li:empty:hover::after, .holmes-debug p:empty:hover::after, .holmes-debug td:empty:hover::after, .holmes-debug th:empty:hover::after { content:'Empty element!'; }