Home

Introducing holmes.css

April 25th, 2011

Had a little brainstorm last night (instead of doing the report for UR!KA), and out of this tempest came holmes.css, a stand>alone diagnostic CSS stylesheet that can highlight potentially invalid or erroneous HTML(5) markup by just adding one class.

Not the most polished piece of work but the focus is on utility. The most difficult aspects were deciding which deprecated elements to flag forapparently b and i tags are no deprecated?! and deciding what level different warnings should be, such as a missing summary on a table element or missing title’s on links. I should really add that the diagnostic takes into account best practice and accessibility as well, hence the latter being an error level rather than a warning.

Ruby on Rails app is in the works. Oh yeah and that UR!KA thing too.

6 Responses to Introducing holmes.css

xec

April 27th, 2011 at 12:37 pm

Awesome, good work!
I made a bookmarklet to be able to inject it on any webpage, hope it doesnt get botched when i post it;

(add as bookmark/favorite url, all on one line)

javascript:var%20s=document.createElement(‘link’);s.setAttribute(‘rel’,'stylesheet’);s.setAttribute(‘href’,’http://www.red-root.com/sandbox/holmes/holmes.css‘);document.getElementsByTagName(‘head’)[0].appendChild(s);void(s);document.getElementsByTagName(‘body’)[0].setAttribute(‘class’,'holmes-debug’);

note: this will remove any other class value from the body tag (ran into trouble with return value when trying to use .className rather than .setAttribute)

Scott

April 27th, 2011 at 12:48 pm

Nice work! I was wondering though – why flag up missing titles on links? I don’t see why you would need to add a title to a link in most cases since the link text normally describes the content of the link.

Also, b and i tags have a new use in HTML5 as identifiers for names or titles. A book title might use the i tag for example.

Luke

April 27th, 2011 at 2:45 pm

@xec thanks! yeah it did a bit, but I get the meaning. I did however already put a bookmark up using github to host it save my bandwidth

@Scott ah thats what b and i do. I’ve only got it down as a warning. For example I’ve found that sited with SEO keyword rich content tend to have linked to other pages within the site, and normally the URL is long with more keywords in it! So the title will specify exactly where this will take you.

Then again Holmes is just a guideline, you can ignore certain things if you want

xec

April 28th, 2011 at 4:38 pm

@Luke aha, i must have missed it thanks again, it might just be one of the most useful bits of css trickery i’ve seen so far!