About now you're asking yourself- "What the heck is he talking about?" I'm talking about a simple test that you can apply to those items that do not validate, but may or may not work on your web pages.
Here's how it works:
- Determine what it is that you want to apply the test to. Using the example page as a guide we'll choose to test if the font color will work if the table cell background properties don't work.
- Apply the test thus- on the example page there is the representation of a notebook. The notebook is laying on a simulated wooden desk. The pages of the notebook use a parchment image and a complimentary background color to simulate parchment pages. If the browser does support table cell background images then it should display as I've described. If it doesn't support them...
- What will it display? One scenario is that the browser doesn't support background images in table cells. In that case, the brown text would display on a mustard yellow background. Still very readable. A second scenario is that the browser supports neither background images or background colors in table cells. In that situation you would have brown text displaying on the simulated wood desktop. A bit harder to read, but still visible. You can see that if the font color doesn't contrast with all the possible background possibilities the text could be unreadable.
Take another example. Suppose the page background is dark blue and my text color is white. I also have a table cell with a white background color and dark blue text. Now, if we apply the works/doesn't work test to this case, what might happen?
Okay- white text on dark blue background, check. White table cell background, dark blue text, check. Browser doesn't support table cell backgrounds, check. Which leaves us with a table cell with dark blue text on a.... dark blue page background. I don't think that's going to be very easy to read, do you?
For those of you using a browser that can see table cell background colors, the following examples are provided for your viewing pleasure:
|
That's the works/doesn't work test. Pretty simple, but many people never stop to think about the consequences of using a html feature that might not be supported. This page illustrates why it is important to both validate and use the works/doesn't work test when you design web pages.
As time goes on, this is becoming less and less of a problem. Newer browsers are replacing the older ones at a record pace. It still pays to know what happens when things "don't work" though.
