Use CSS Diagnostics with Stylish to find bad HTML

A while ago I mentioned Obtrusive JavaScript Checker and Inline Code Finder as useful quality assurance tools that will help you find potentially obtrusive JavaScript and CSS.

A similar approach to checking HTML quality is using CSS to highlight invalid or deprecated code, which I talked about in Helping your client maintain markup quality.

In that post I mentioned Marco Battilana’s Big Red Angry Text and Eric Meyer’s Diagnostic Styling. Both articles contain examples of stylesheets that will highlight problematic HTML.

Neal Grosskopf has taken the concept a step further and created a diagnostic stylesheet that highlights, among other things, deprecated and proprietary elements and attributes. He describes his stylesheet in A Second Look At CSS Diagnostics.

Including a diagnostic stylesheet works fine for sites that you develop and have write access to. But since I regularly review sites that other people have built I would like to be able to apply a diagnostic CSS to any site. Enter the Firefox extension Stylish.

With Stylish installed in Firefox you can do things like easily toggle user stylesheets on and off, and specify which sites they should be applied to. Perfect when you want to apply a diagnostic stylesheet only to some of the sites you visit.

Posted on February 5, 2009 in CSS, (X)HTML