MLI Home → Writings → Tech Notes → CSS Tip #1: A Navigation Bar that Degrades Gracefully

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 div element 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.)

• CSS's display property 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.

The Results

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.

Notes

2003-01-02. Parts of this technique can be adapted to:

• Replace images of text with styled text equivalents (for example, becomes ['new' text icon])

• Wrap PNGs around GIFs and JPEGs

• Replace "--"s with em dashes

---

Previous: A Frustrating Error Message ··· Next: CSS Tip #2: Making Your Site Modifiable

MLI Home → Writings → Tech Notes → CSS Tip #1: A Navigation Bar that Degrades Gracefully