Diagnose content entry errors…with css?

Ah, the frenzy of a site launch. You’re templates are in. The CMS is ready. And so now it’s a race to enter your content. You’re copying and pasting left and right. You’re putting in your links. Entering place holder content where you need it. You’re jamming away in the WYSIWYG editor. Everything moves at a breakneck pace.

And some things get forgotten.

Perhaps there’s a placeholder link that was never replaced. Maybe one of your content editors didn’t realize the importance of alt tags in your images. And the WYSIWYG editor added empty paragraph tags with reckless abandon.

CSS to the rescue.

From the mind of CSS deity Eric Meyer comes diagnostic styling. The concept is simple. Create stylesheet that points out, in glaring lime and fuchsia, mistakes in your code and missteps in your content entry.

You can view your site with the stylesheet without wrecking your live site by linking it up as a user-defined stylesheet. You should be fine in Firefox and IE7, but using it in IE6 can be problematic.

The stylesheet points out, among other things, hrefs populated with “#” (popularly used as placeholder links) and unpopulated paragraph tags. For strict coder-types, it knocks out deprecated elements and super-duper nested divs. For the accessibility mavens out there, find missing alt tags and inaccessible data tables. You can also customize the script to find other issues or mistakes that may be common to your site: If you did away with one of your CSS class IDs, you can use this to scan the site and make sure it’s gone everywhere. This is your stylesheet – add or remove items at your will.