Download!
Latest Build: holmes.css v1.0.1 or view the github repo
Drag this to your bookmarks toolbar or onto any page to apply holmes.css -Holmes.css Bookmarklet Big thanks to @danielgwood for this!
What does it do?
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
Thanks to Anthony Mann, holmes now displays an informative error message when you hover over the element. Support for :after/::after on images is non-existent however in most browsers.
How do I use it?
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.
In terms of configuration, such as changing the flag colours: go nuts!
Why should I use it?
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. Not recommended for live enviroments.
Remember too that these are just guidelines: if something is flagged but you can't change it for a good reason, don't worry about it :) Also use a validator if you want to be 100% sure.
Browser Support
Works 100% in
- Google Chrome 10+
- Safari 5+
- Opera 10+
- Firefox 3.5+
Due to extensive use of the :not CSS3 selector, holmes.css does not function well in IE 8 and below, but it should (NB: not tested yet) work in Internet Explorer 9. Oh well.
Holmes elsewhere on the web
Check out @tmorts port for Wordpress! holmes.css on Wordpress
Acknowledgements
Inspired by Harry Roberts & InuitCSS (which is used on this page),Eric Meyer, Neal Grosskopf and procrastination from coursework! Thanks also to Anthony Mann for the debug message code.
holmes.css Copyright @copy; Luke Williams 2011- http://www.red-root.com | @luke_redroot