What is CSS diagnostics? It's a method of applying styles to elements in your markup to catch standards compliance issues. A way of ensuring you don't leave any serious accessibility holes and a visual deterrent for web authors editing pages with diagnostics switched on.
Here are some resources I found useful in understanding the practicality of this pioneering concept:
- Diagnostic styling
- CSS Tools: Diagnostic CSS
- Helping your client maintain markup quality
- Find depreciated elements using CSS
The only problem with CSS diagnostics is that it relies on the CSS capabilities of a browser to find issues. So if your browser is less capable, meaning it doesn't understand the diagnostic styles, then it negates the idea totally. Mind you, we're at a point in CSS support whereby this is becoming less and less a problem but it is still a potential one.
Luckily CSS diagnostics isn't the be all and end all of diagnostics. We have the king of diagnostics — Firebug, Web Inspector for Safari and more recently the much improved IE8 Developer Toolbar. And if you're looking for a cross-browser solution there's always the brilliant XRAY. Oh, how spoilt we all are!
