TOOLS - CSS: Professional Techniques for Modern Layout - page 29

31

Figure 1-31: The SelectORacle page.

Okay, that might be a little confusing at i rst glance, but if you read it slowly it comes (mostly)
clear. Also, as of this writing, no browser in the world supported everything in that selector, so
don't be too concerned about it. Just know that, should you come across a selector whose
purpose is unclear, the SelectORacle may be able to help.

Ever wanted your browser to scream at you when it loads a page with outdated, icky elements
like font ? Now it can—visually, anyway—with diagnostic style sheet.

DIAGNOSTIC STYLE SHEET
With a diagnostic style sheet, you can have a quick visual cue as to when things have gone
wrong with the page's markup. One example of a diagnostic style sheet can be found at
meyerweb.com/eric/tools/css/diagnostic (in both CSS3 and IE7-friendly
versions), and a similar resource is at accessites.org/site/2006/07/
big-red-angry-text .

What's the point? As an example, one line of the meyerweb diagnostic style sheet says:

*[style] , font , center { outline : 5px solid red ;}