|MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA|
Using CSS as a Diagnostic Tool
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
Save these rules to a file named something like
We can take things even further and see both the horizontal and vertical aligments of table cells. Here are the rules needed:
We see the results in Figure 2. Remember, this tool requires attribute selector support in order to work.
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.
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":
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:
...or maybe we could just make non-ALT images really obvious:
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.
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:
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:
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:
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:
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!
Discuss this article in the O'Reilly Network Forum.
Return to the O'Reilly Network Hub.