|MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA|
Using CSS as a Diagnostic Toolby Eric A. Meyer
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:
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:
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
So what we've done is set
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:
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.