Using CSS as a Diagnostic Tool

O’Reilly Network
July 2000

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 would 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:

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.

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 dotted blue outlines, and regular table cells get one-pixel dotted gray 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.

Revealing Alignment

The next tool we'll create shows the alignment of each cell in a table. This approach requires support for attribute selectors, which limits its use to Mozilla and Opera 4. How it works is that we select for table cells and headers which have align set to either right or left, and place an appropriately-aligned arrow image in the background of these cells. Here's the CSS: 

TD[align="left"], TH[align="left"]
   {background: url(left-arrow.gif) center left no-repeat !important;}
TD[align="right"], TH[align="right"]
   {background: url(right-arrow.gif) center right no-repeat !important;}

Save these rules to a file named something like "AlignTool.css" and make it your user stylesheet. The end result will be that any table cell with an alignment set will get an arrow for a background. Any table cell which doesn't have any alignment will not get a background. However, sometimes it's desirable to see which cells don't have explicit alignment set, so we'll add this to the beginning of the stylesheet: 

TD, TH {background: url(no-align.gif) center no-repeat !important;}

We can take things even further and see both the horizontal and vertical aligments of table cells. Here are the rules needed: 

TD, TH {background: url(no-align.gif) center no-repeat !important;}
TD IMG, TH IMG {opacity: 25% !important;}
TD[align="left"], TH[align="left"]
   {background: url(left-arrow.gif) center left no-repeat !important;}
TD[align="right"], TH[align="right"]
   {background: url(right-arrow.gif) center right no-repeat !important;}
TD[valign="top"], TH[valign="top"]
   {background: url(top-arrow.gif) top center no-repeat !important;}
TD[valign="bottom"], TH[valign="bottom"]
   {background: url(bottom-arrow.gif) bottom center no-repeat !important;}
TD[align="left"][valign="top"], TH[align="left"][valign="top"]
   {background: url(topleft-arrow.gif) top left no-repeat !important;}
TD[align="right"][valign="top"], TH[align="right"][valign="top"]
   {background: url(topright-arrow.gif) top right no-repeat !important;}
TD[align="left"][valign="bottom"], TH[align="left"][valign="bottom"] 
   {background: url(bottomleft-arrow.gif) bottom left no-repeat !important;}
TD[align="right"][valign="bottom"], TH[align="left"][valign="bottom"] 
   {background: url(rightleft-arrow.gif) bottom right no-repeat !important;}

We see the results in Figure 2. Remember, this tool requires attribute selector support in order to work.

The opacity rule makes images "see-through," so that you can see the alignment arrows which are "behind" images that are inside a table. Admittedly, I picked this effect because it lets us play with opacity, which is pretty cool, butit's also useful. Without this effect, images would completely overwrite some of the arrows.

Obviously, this stylesheet will require that the images be created and live in the same directory as the user stylesheet. That's okay, though, because I've created them for you. They're all part of the archive file I've created for download; it contains all of the images and stylesheets in this article.

But that's for later! Before that, we have more tools to set up.

ALT Checker

Most Web pages use images to some degree, and given that fact, it's important to provide some kind alternate text for each one, just in case a visitor to your site is blind and uses a speaking browser, or is using a text-based browser like Lynx or one of those Web-aware cell phones.

If you're using Mozilla, you can play with the opacity of the images in order to see which ones don't have any ALT text. Try these rules in a user stylesheet called "TransAlt.css": 

IMG {opacity: 0.33 !important;}
IMG[alt] {opacity: 1.0 !important;}

This sets all images to have an opacity of 20% (in other words, they let through 80% of their background), and any image with an ALT attribute to full opacity. Thus, images with ALT text will appear normal, and those without will become translucent.

If you're using a browser which doesn't support opacity, there are always other ways to style images in order to make the non-ALT ones stand out. For example, we could hide or show images without resorting to opacity: 

IMG {visibility: hidden !important;}
IMG[alt] {visibility: visible !important;}

...or maybe we could just make non-ALT images really obvious: 

IMG {border: 5px solid red !important;}
IMG[alt] {border-width: 0 !important;}

The results of this last stylesheet are demonstrated in Figure 3. Once again, this will only work in a browser which supports the attribute selector syntax, so that leaves out Internet Explorer.

Ensuring Height and Width

Related to the previous tool is one to make sure your images have height and width attributes. We don't care what the values are, just that the attributes are present. The rules which make this possible are: 

IMG {border: 5px solid red !important;}
IMG[height][width] {border-width: 0 !important;}

Once again, the offending images will be outlined with a thick red border. You can change the effect, of course-- make the images which need help invisible, or semi-invisible, or change their size, or just make the borders thicker. Whatever serves to draw your eye, that's what you should do.

Highlighting FONT elements

Okay, so you've set about purging your site of all its presentational markup. You're convinced you don't have a single FONT element left. Ready to put that conviction to the test, using any of the browsers in your toolbox?

If you think you're up to it, create a file called "FontPop.css", fill it with the following rules, and set it as your user stylesheet: 

FONT, FONT * {font-weight: bold !important; 
   color: yellow !important; 
   background: red !important;
   border: 3px solid lime !important;
   padding: 0.25em !important;}

Now cruise around your Web site and see if anything jumps out at you. For that matter, cruise around other people's Web sites and see what happens. Just remember that what we've done is set these optically challenging styles for any FONT element and any descendant element of a FONT element-- whether that's an image, anchor, form element, or anything else. So be prepared for some ugliness. My experience is that some sites are pretty hard on the ol' eyes.

Looking Under the Hood

Then again, you might want to see the outlines of every single element on every Web page you visit. And if you're going to go that far, you may as well make the outline really obvious, so: 

* {outline: 1px dotted orange !important;}

Of course, these outlines might be hard to see on a few sites, like the Web Standards Project, but you could always change the color to something which better suits you (or the site you're visiting).

A Pre-Made Toolbox

As I mentioned earlier, I've created archive files containing all of the background images and stylesheets used in this article. You have your pick of two formats: ZIP and StuffIt. Now you don't have to bother typing in the stylesheets yourself, or creating the necessary images.

For those who want to use some of these tools in browsers which don't support user stylesheets, your options are a little more restricted. You can LINK the stylesheets into pages you're writing and testing, but you can't surf the Web with the stylesheets set. However, if you'd like to LINK in the one tool which will work in some older browsers, you can point to the copy of FontPop.css hosted on my personal Web site if you'd like. It will be located here: 

http://www.meyerweb.com/eric/css/tools/FontPop.css

The case is important, so make sure you copy the URL exactly as it appears.

This Is Just The Beginning

As useful as these tools may be, they're just the tip of the iceberg. If there's a need to figure out how a document is structured, or which elements have which attributes, then user stylesheets can help out. I hope that readers will contribute their own tools to a new service I'm creating: the Author's Toolbox. Send along interesting and useful user stylesheet-based tools, and I'll add the tool along with your name. Here's your chance to change your job title to "Web Mechanic"-- let's see those tools!