Diagnostic Styling Reloaded
Post from August 1, 2009 (↻ August 23, 2018), filed under Web Development.
This and many other posts are also available as a pretty, well-behaved e-book: On Web Development. And speaking of which, here’s a short treatise just about managing the quality of websites: The Little Book of Website Quality Control.
Eric cultivated the concept of “diagnostic styling,” meaning using CSS to track down problems within HTML documents. I’ve been working with diagnostic style sheets for general quality assurance or to uncover specific semantics or maintainability problems mostly through bookmarklets. One of these bookmarklet style sheets is now publicly available on
Google Project Hosting :
I wrote this style sheet a couple of months ago for Google, not necessarily following specific needs but to provide an additional quality-related tool. To follow many other—though obviously much more impactful—examples of Google sharing code, I decided to make that QA style sheet public, too, on
Google Project Hosting so to play with that as well. This should explain both hosting and licensing of this rather small project.
Some things on the QA Style Sheet’s site are not quite perfect, above all that I couldn’t directly link a bookmarklet of the style sheet, which is the most useful way of working with it (that bookmarklet link is available on a separate page). There are many ways to inform me about issues though, be it on the project site or in this place. While I hope it’s not difficult to understand what the style sheet does and why, I hope to slowly extend the site’s documentation.
About the Author
Jens Oliver Meiert is a technical lead and author (sum.cumo, W3C, O’Reilly). He loves trying things, including in the realms of philosophy, art, and adventure. Here on meiert.com he shares and generalizes and exaggerates some of his thoughts and experiences.
If you have any thoughts or questions (or recommendations) about what he writes, leave a comment or a message.
This is freakin’ excelent ! Thanks a lot, I’m gonna over-use it !
Useful. Thank you for sharing.
I was thinking of building something similar, but with powerful tools like Firebug doesn’t make much sense now. It will be cool to make bookmarklet for IE6 who will simulate the DIV behavior.
Have a look at the most popular posts, possibly including:
Perhaps my most relevant book: CSS Optimization Basics (2018). Writing CSS is a craft. As craftspeople we strive to write high quality CSS. In CSS Optimization Basics I lay out the, at least some of the most important aspects of such CSS.
Looking for a way to comment? Comments have been disabled, unfortunately.