Using CSS as a Diagnostic Tool
Pages: 1, 2

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 that 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.

Figure 2. Showing the alignment of each cell in a table (click for full-size view.

The opacity rule makes images "see-through," so that you can see the alignment arrows "behind" images that are inside a table. Admittedly, I picked this effect because it lets us play with opacity, which is pretty cool, but it'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 of 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 33% (in other words, they let through 66% 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 that 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 that supports the attribute selector syntax, so that leaves out Internet Explorer.

Figure 3. Putting a red border around images without ALT tags.

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 that 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 that 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 that 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 that 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!

Eric A. Meyer is a member of the CSS&FP Working Group and the author of Cascading Style Sheets: The Definitive Guide.

Discuss this article in the O'Reilly Network Forum.

Return to the O'Reilly Network Hub.