Holmes - The CSS Markup Detective
Holmes is stand-alone diagnostic CSS stylesheet that can highlight potentially invalid, inaccessible or erroneous HTML(5) markup by adding one class. The holmes.css file will display either an error (red outline), a warning (yellow outline), or a deprecated style (dark grey outline) for flags such as:
- Missing required attributes on tags, such as name attributes on inputs (lots of these)
- Potentially improvable markup, such as links with href=”#”
- Deprecated and Non-W3C Elements - see W3C.org’s article on obselete tags
- Non-W3C Attributes - as above, just the most important ones since there are MANY
holmes.css is useful for checking the quality of your code (up to W3C HTML5 standards), nitpicking over ensuring markup is valid and semantic and accessility guidelines are met, and when you are tasked to fix up and debug an old, OLD website. It has a simple implementation and a mostly unobtrusive effect on your page.
Simply download a version of the CSS, minified or normal (with docs), and include a stylesheet link to it on your page. Or copy the contents into one of your own stylesheets. Then add the class “holmes-debug” to either your BODY or HTML tag, and you’re set to go.
Requirements: -
Demo: http://www.red-root.com/sandbox/holmes/
License: License Free
0
503
