redroot / holmes

Holmes is stand-alone diagnostic CSS stylesheet that can highlight potentially invalid or erroneous HTML(5) markup by adding one class

holmes.css - CSS Markup Detective [unmaintained]

Holmes is stand-alone diagnostic CSS stylesheet that can highlight potentially invalid, inaccassible or erroneous HTML(5) markup by adding one class.

What does it cover?

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 alt tags on images (lots of these)
• Deprecated and Non-W3C Elements - see [W3C.org's article on obsolete tags] (http://www.w3.org/TR/html5/obsolete.html#obsolete)
• Non-W3C Attributes - as above, just the most important ones since there are MANY

Hovering over most elements will cause a description to be displayed in the top left, or top right corner of the screen.

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 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.

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!

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.

License

Licenced under GPL license http://www.gnu.org/licenses/gpl.html

Acknowledgments

Inspired by http://csswizardry.com/inuitcss/,[http://meyerweb.com/eric/tools/css/diagnostics/](Eric Meyer), [http://www.nealgrosskopf.com/tech/thread.php?pid=17](Neal Grosskopf) and procrastination from coursework!

Thanks for http://www.twitter.com/MrNibbles for the debug message on hover code!

Changelog

• 06.08.12 - Removed error for missing title attributes, and downgraded empty alt to warning
• 14.08.11 - Removed check for u tag since this is now valid in HTML5
• 03.06.11 - Changes references of 'darkgrey' to a hex code to attempt to ensure the stylesheet is valid css3 (still 4 errors)
• 27.04.11 - thanks to http://www.twitter.com/MrNibbles, there is now a message on hover on any flagged elements. No support for ::after on images though :/
• 27.04.11 - Changed the no title/empty title on anchor links to a warning level instead of a error level
• 25.04.11 - Removed test for plaintext, even though it's still in the CSS file, since it BUTCHERED the rest of the testsuite page.

holmes's Issues

Table Summary

The summary attribute on the table element is obsolete.
http://www.w3.org/TR/html-markup/table.html

Link to project website not quite correct

Either the link in the project description line should be
http://red-root.com/sandbox/holmes/index.html , or your server needs to be reconfigured. :]

Unsure if javascript:void(0); or # is a problem

I just wanted to raise a bit of a concern about an error raised over:
Enable rich-text

Coming from:
.holmes-debug a[href="#"],
.holmes-debug a[href^="javascript"],

I don't know that either of these necessarily presents an accessibility challenge. I just wanted to flag this as a potential concern, but need to investigate it further.

Is there a way to make holmes ignore validation on specific elements?

Hi guys, I use hashgrid http://hashgrid.com to debug my grids while implementing the frontend. Hashgrid create empty divs to generate the overlay grid.

I added Holmes to my frontend bootstrap and it's working great, except for the fact it's affecting hashgrid. It would be great to have a way to make holmes ignore specific elements that we might need to ignore.

Anyway, I just wanted to let you guys know about this situation. If there's already a way to do that please let me know. I'll try to come up with a solution anyway.

Thanks!

img with empty alt attribute shouldn't be an error

Why is an img with an empty alt attribute considered an error? I'd warn the users instead.
Quoting the specs:

alt = any value
The fallback content for the image.

Any value means that <img src="/foobar.png" alt="" /> is valid. In fact take a look at the second paragraph here:

The preferred means for marking up a text alternative for an img element is to use the alt attribute to provide a full equivalent for the image, or to provide an alt attribute with an empty value (to indicate that the image is purely presentational).

Table summary attribute is no longer supported in HTML5

Just saw this error come up when running through the HTML5 validator:
"The summary attribute is obsolete. Consider describing the structure of the table in a caption element or in a figure element containing the table; or, simplify the structure of the table so that no description is needed."

clarify license

Can you clarify what license this project is under?

There is an application to make a Drupal project which seems to draw on code from this project. It would be nice to know what license that code might be under.

I can get the :not selector to work

After reading - http://webaim.org/blog/plague-of-outline-0/

Realized that there's an opportunity to search for this as well. I added this:

.holmes-debug a[outline="0],
.holmes-debug a[outline="none"] {
outline: 3px solid red;
}

But although I could get the :not selector to work I couldn't seem to find an :is selector that would do the reverse. I must be missing something, but it seemed like a good addition.

label:not([for]) is valid when has nested input field

You indicate label without [for] attribute as invalid at https://github.com/redroot/holmes/blob/master/holmes.css#L89.

HTML4 spec (http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1):

When attribute is absent, the label being defined is associated with the element's contents.

HTML5 spec (http://www.w3.org/TR/html5/forms.html#attr-label-for)):

If the for attribute is not specified, but the label element has a labelable element descendant, then the first such descendant in tree order is the label element's labeled control.

E.g. this example is valid: <label><textarea name="text"></textarea></label>

IMHO .holmes-debug label:not([for]) can be changed to something more strict, e.g. .holmes-debug label:not([for]):empty

W3C Validation

I'm in the middle of blogging about this neat tool. Decided to validate it using the W3C - http://jigsaw.w3.org/css-validator/ - it tosses out 9 errors based on:
https://github.com/redroot/holmes/raw/master/holmes.css

Probably worth fixing up at some point. This is a great demonstration of the power of CSS3 though!

Clear license statement

I do like the idea of your CSS file but need to know if it is GPL compliant code.

Ideally I'd like to see it included in Drupal modules or themes so that it is easier for admins to have this default review for HTML5 sites. To do that the code needs to be GPL compliant.

Non conforming features

There is a W3C Editor's Draft http://www.w3.org/html/wg/drafts/html/master/obsolete.html#non-conforming-features , and I would like to see them all implemeted in holmes.

Anyone against adding these elements? If not, I am happy to add them and make a pull request.

Replace border with outline

Is there a particular reason, why "border: 2px solid color; " is sometimes used, instead of outline?

IMO outline is much better, as it doesn't relocate/move/destroy the layout and should be used everywhere. I couldn't find any disadvantages yet.

Bookmarklet on home page uses old/invalid URL

Should probably be "http://rawgit.com/redroot/holmes/master/holmes.min.css" or even better: "//rawgit.com/redroot/holmes/master/holmes.min.css" for protocol-independence. (Though in reality it should probably detect the current page's protocol and fallback to http if someone is using it from, for example, a local file.)

title not needed in links

I just removed:

.holmes-debug a:not([title]),
.holmes-debug a[title=""]{
outline: 3px solid #fd0;
}

As the title attribute in links can actually hurt accessibility:
http://www.rnib.org.uk/professionals/webaccessibility/wacblog/Lists/Posts/Post.aspx?id=38

I've seen cases (recently) where a government agency went through and inserted title="title" in all of the links for accessibility. That's just nonsense.

Anyways, I'm impressed with this approach!

Titles on Links should be warning, not error

Titles in links are not a requirement of WCAG 2.0. Providing link text that describes the purpose of the link is a requirement and that may require titles in some limited cases. The lack of titles should be a warning so users look more carefully at their links to check if they can be better written or if titles are needed to provide context.

Leaving titles out is never an error. Not writing good link text is an error but this is something that can't be tested since the tests cannot understand context.

For more information see: http://www.w3.org/TR/WCAG20-TECHS/H33.html

Please add to Bower and NPM.

Would be much easier to incorporate into projects.

u is a valid part of the HTML spec

The test for u needs to be removed. It was deprecated in HTML4 and was invalid in XHTML but was added back as part of W3C's HTML5 draft spec. It's a valid part of HTML5.

See: http://www.w3.org/TR/html5/text-level-semantics.html#the-u-element