Good Web design degrades well. Translation: What you build specifically for a 4.0 browser shouldn't look like crap in a 3.0, 2.0, or 1.0 browser. If it's not at least usable, you've failed.
With stylesheets, this is very important, because people with non-CSS browsers will be visiting your pages. What will they see? It might not be gorgeous, but is it usable? If it's ugly, can you make it more attractive?
Sure, you can always create different sets of pages for different browsers. But we like to avoid that if at all possible because of how much extra up-front and maintenance work that it entails.
So, let's look at tricks for creating stylesheets-enhanced pages that degrade well in other browsers.
Trick No. 1: Use Styles on Similar HTML Tags
If you want to control the level of boldness using font-weight, why not use the <B> tag for applying the style? That way, the text will be bold in older browsers as well.
Try to find corresponding HTML tags for your CSS declarations, so that you'll end up getting at least some of the same effects in older browsers that you're getting in the newer ones.
Trick No. 2: Double Up Styles with HTML Tags
If you want to make absolutely sure a paragraph is blue, use both CSS and HTML to make it so. Double up with both color: blue and <FONT COLOR="blue">. If you want something centered, use both text-align: center and <CENTER>. You get the idea.
Trick No. 3: Make Unwanted Elements "Invisible"
If you've got a huge decorative font symbol, for example, that looks tiny and silly in an older browser, use <FONT COLOR> to give it the same color as the background, thus making it vanish in older browsers. But the CSS rule will still color it red (or whatever) for newer browsers, so people with newer browsers will still see your cool effect.
Making your pages degrade well isn't just something to spend five minutes on at the end. It's something to keep in mind during the entire design process, as you initially create your CSS rules and plan out your goals. And, as always, the most important three words are: test, test, test.
Everything we've talked about for the last five days relates to version 1.0 of CSS. But version 2.0 is now also starting to get browser support, and you're gonna love it.
next page»