Diagnostic Styling

非原创，来源网络。感谢原作者奉献如此精彩文章。原文地址： http://meyerweb.com/eric/thoughts/2007/09/07/diagnostic-styling/

On stage at An Event Apart Chicago, I made reference to recent efforts I’ve been making to develop a set of “diagnostic” styles. I’d hoped to have them ready for presentation in Chicago, but didn’t get it done in time.

Well, they’re still not really done, but as I’ve now torn them apart and rebuilt them three or four times, with no real end to that cycle in sight, it’s time for me to get them off of my hard drive and into the public eye. It’s a little bit complicated, so rather than post the whole thing in this entry, I’m going to link to a demonstration page. I first want to say a few things about it, though.

The primary goal here is to have a set of rules that can be applied during the development phase of a new layout. These rules’ aim is to visually highlight problems in the markup. For example, here’s one of the rules:

a[href="#"] {background: lime;}
a[href=""] {background: fuchsia;}

That brings some eye-watering attention to any link that has an empty href, or is (most likely) being used as a JavaScript trigger with no fallback.

Where things got tricky was when I wanted to do things like higlight images that didn’t have alt or title attributes. In a perfect CSS3 world, I could just say img:not(img[alt]) to select non-alted images. At least, I think that’s what I would say—:not() syntax makes my temples throb. Since I was developing these with the idea of releasing them to a more general development audience, though, I decided to use regular old non-:not selectors.

So what I ended up doing, in slightly simplified form, was this sort of thing:

img {outline: 5px solid red;}
img[alt][title] {outline-width: 0;}
img[alt] {outline-color: fuchsia;}
img[alt], img[title] {outline-style: double;}
img[alt=""][title], img[alt][title=""] {outline-width: 3px;}
img[alt=""][title=""] {outline-style: dotted;}

The logic works out like so:

1. Set all images to have a big red outline.
2. If an image has both alt and title attributes, set the outline width to zero.
3. If an image has an alt attribute, set the outline color to fuchsia. This means the outline of any image that doesn’t have an alt attribute will stay red.
4. As long as an image has either an alt or a title attribute, make its outline style double.
5. If an image has an empty alt with any kind of title, or vice versa, make the outline’s width three pixels.
6. If an image’s alt and title attributes are both empty, then make the outline dotted.

Whew. Maybe I piled a few too many conditions in there, but I wanted to get some finer granularity on the results, which you can see demonstrated (along with several other things, like highlighting table headers without scope attributes and tables without summary attributes) at the diagnostic demonstration page. On that page, you’ll see a number of examples and the style sheet that drives them all. If it’s getting in the way of seeing what’s going on, move the mouse over it to mostly clear it away without actually removing it. Mouse back out to bring it back. (Maybe I should reverse those states—what do you think?)

Admittedly, much of what these styles do can be replicated with tools like the Web Developer Toolbar. The advantage I find with writing my own diagnostic styles is that I can tune them to present exactly the way I want them. Outlining deprecated elements is fine, but what if I’d rather make them lime-green on cyan to really drive the point into my optic nerves?

Anyway, I don’t for an instant think that these constitute a replacement for the WDT. They’re just another handy tool to have in the toolbox.

A final note: when actually using diagnostic styles, all of the declarations should be marked !important so as to ensure their application. I left those directives out of the demo page for clarity’s sake. If you’re going to use diagnostic styles of this sort in your own projects, remember that you’ll need to add them.

I’m putting these out for comment, suggestions, and general community improvement. Anyone see things we could add or upgrade? Let us know!