Using CSS as a Diagnostic Tool

Despite all the point-and-click editors out there, many of us still write code by hand, and many more find themselves with the need to sort out what another author (or the point-and-click editor) has generated. Finding the weak points and structure of a page is often one of the most time-consuming jobs a webmaster has to face. And let's be honest; it's not much fun either.

What would you say if I told you that you can create your own diagnostic tools using nothing more than commonly available software you can download over the Internet and some simple CSS? You'd probably say I was crazy. You might be right, but so am I. You really can save yourself a lot of time and headaches with a combination of a browser and some fairly simple CSS.

How? As we'll see, simple user stylesheets can be used to:

• See exactly how tables are structured
• Figure out how table cells are aligned
• Quickly see which images on a page still need ALT text
• Point out where you still have FONT tags lurking in your markup
• Expose the overall page structure

The inspiration for this particular approach came after reading the excellent article Tap the Power of Mozilla's User Stylesheets by Andrew Wooldridge of Netscape. Once Andrew showed me the way, the rest began to fall into place.

Filling your toolbox

First, you'll need one or more of the following browsers: Mozilla, preferably M16 or later; Microsoft Internet Explorer 5.0 or later for either Windows or Macintosh, preferably the latest available version; and Opera 3.6 or later, preferably 4.0 or later. I use these versions because they all support user stylesheets, which is convenient, and also because all of them support CSS2 to some degree. You'll also need software to write CSS, whether that's a text editor like BBEdit or something more point-and-click, such as Style Master or TopStyle.

Most of the examples in this article will use Mozilla M16. This is because, of the three browsers mentioned, it's the most standards-capable rendering engine, and it typically downloads quickly. Opera 4 is very close to Mozilla, if not better, in both categories, and is certainly a worthwhile purchase if you want to spend money to get a standards-compliant browser. In each section, after I've shown how to set up a given diagnostic, I'll note where the code I use won't work in other browsers, or how to modify it in order to make it work.

Table structure revealed

This one's pretty easy, and it works in all the browsers in your toolbox. It will also let me introduce the reasons behind some of the conventions in these tools.

Have you ever wanted to see how a table is structured? Maybe you've set a border on it temporarily in order to get a better view of the way it's set up. That works for local files, of course, but doesn't help for picking apart pages on remote servers. Wouldn't it be great if you had a sort of "view filter" which would outline the table structure on any page you view? Well, this code will let you do that:

TABLE {border: 2px solid purple !important; 
   margin: 5px !important; border-collapse: 
   separate !important; border-spacing: 1px !important; 
   empty-cells: show !important;}
TH {border: 1px solid blue !important; 
   padding: 3px !important;}
TD {border: 1px solid red !important; 
   padding: 3px !important;}

Of course, you can change the colors and outline styles to suit your own tastes.

Figure 1. You can view the table structure without having edit access to the HTML file (click for full-size view).

As we can see in Figure 1, the structure of a table is outlined for our perusal. Sometimes nested tables can make it tough to work out the details, which is why we added the five-pixel margin around tables.

Okay, so how does this work? First, you have to create an external stylesheet with the above rules. Save it to a file named something like TableOutline.css and then make that file your user stylesheet. (This is usually done in the browser's preferences; see your browser's help files for more details.)

So what we've done is set TABLE elements to have a two-pixel outline and five pixels of blank space around them. Table headers will get one-pixel solid blue outlines, and regular table cells get one-pixel solid red outlines. So what's with the "!important" declarations? These make certain that the user styles will be obeyed. In CSS2, important reader styles win out over everything else, even important author styles.

Of course, the outlines might be a bit tough to see in some circumstances. In that case, we could just set background colors instead, like this:

TABLE {background: purple !important; 
  margin: 5px !important; border-collapse: 
  separate !important; border-spacing: 1px 
  !important; empty-cells: show !important;}
TR {background-color: gray !important;}
TH {background-color: purple !important;}
TD {background-color: red !important;}
TR, TD, TH {padding: 5px;}

We could name this one something like "TableCellback.css". And, as always, feel free to change the colors to suit yourself. I picked these more or less at random.