Cascading Style Sheets Tip #1:
A Navigation Bar that Degrades Gracefully
A common HTML technique is to create a navigation bar using a table, putting the navigation bar in one cell and the rest of the page's contents in another. While this works, it has all the drawbacks of tables. They don't degrade gracefully (i.e., work well) on browsers that are text-only or have small screens. Some browsers don't display a table until it's been completely downloaded, which leads to unacceptable waiting. Worst of all, if the page is longer than the browser's window, then scrolling the page's text also scrolls the navigation bar out of the window. What good is a navigation panel that's off-screen?
With cascading style sheets we can do better, and in a way that degrades gracefully. This page's fake navigation bar (either at the left or top) demonstrates the technique.
On browsers that render CSS correctly, the navigation bar appears in the wide left margin as an icon and list of text links. As the page is scrolled, the navigation bar remains fixed in place, always available.
On browsers that don't render CSS, the navigation bar appears at the top of the page as a list of text links separated by vertical bars (|). This navigation bar scrolls with the rest of the page.
Because your browser isn't rendering style sheets, the navigation bar should appear as a row of text links at the top of the page. This 28K screen capture demonstrates what it looks like on a browser that renders CSS.
If the navigation bar looks like neither of these, it's the fault of your browser. It doesn't render CSS correctly.
How It Works
We use a few features of CSS to accomplish this:
The navigation bar is inside a
divelement with a fixed position. On browsers that render CSS, this prevents it from scrolling with the rest of the page. Browsers that don't render CSS will put the contents at the top of the page.
CSS's pseudo element selectors, combined with generated content, are used to reveal content on browsers that render CSS, and hide it on those that don't. Here, we're using them to display the icon in the navigation bar. On browsers that don't render CSS, the icon isn't displayed. (The icon itself is a link, and in real use would probably go to the site's home page.)
displayproperty is used to hide content on browsers that render CSS, and reveal it on those that don't. (This is the opposite of the previous technique.) In this case, the hidden content is the vertical bars that separate links on the navigation bar. Browsers that don't render CSS will show the vertical bars.
On browsers that render CSS, the result looks just as good as using a table, and is more usable (because the navigation bar remains in place).
On browsers that don't render CSS, the navigation bar isn't quite as æsthetically pleasing, but (a) the page loads more quickly, (b) more of the screen is dedicated to content as opposed to navigation, and (c) it's just as usable as a table-based navigation bar.
If you're interested in the techniques demonstrated here, take a look at this page's HTML and the page's style sheet. I've added comments indicating what's important.
2003-01-02. Parts of this technique can be adapted to:
Replace images of text with styled text equivalents (for example, becomes )
Wrap PNGs around GIFs and JPEGs
Replace "--"s with em dashes