CSS Tools: Diagnostic CSS

Validation is great, but it won't catch everything. For example, if you have a link where you forgot to add a URL value to the href attribute, the validator won't complain. The syntax is valid, even if it's a broken experience. Similarly, the validator will be happy to let through empty class and id values.

Maybe you wanted things that way, but more likely not. That's where diagnostic styles come in.

With a diagnostic stylesheet, you can quickly see where your markup might have some trouble. If you want to see this in action, there are two demos to check out:

1. The more advanced version, which uses the :not() syntax and outlines and so isn't suitable for IE7
2. The IE7 version, which does much the same things but in a less straightforward manner and uses borders instead of outlines

The styles for each are embedded in the demo pages, but they have a few extras meant to make the demo pages themselves understandable. Here are links to the unadorned diagnostics themselves, one in each flavor:

1. diagnostic.css
2. diagnostic-ie7.css

You can read more about diagnostic CSS in a September 2007 post or an article from 24ways 2007.