Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Ajax and JavaScript

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

Project 12: Transitional CSS and Javascript Strategies

Figure 12.1Figure 12.1

Getting Started

Web site navigation interfaces that use a tab metaphor are very common. (Perhaps the best-known site that uses a tab-navigation interface is Yet in most cases, the navigation tabs are merely graphical links that load other pages from the server.

In this project, we show you how to create a tabbed "index-card" type of interface using a combination of CSS and JavaScript. All of the "pages" are actually contained in the one page; once the whole page is loaded into the browser, the user can very quickly "flip" through each "page" without having to reload content from the server.

Because we are using CSS and JavaScript, which are only recognized by the newer browsers, we've also taken steps to ensure that the page is still readable in older browsers.

Here are the main points we'll cover in this project:

  • Creating "gracefully degrading" pages using a combination of CSS and JavaScript

  • Modularizing the code

  • Using arrays to streamline the script

  • Manipulating the stacking order, or z-index, of elements

Gracefully Degrading Pages

The latest advanced graphical browsers offer a wealth of JavaScript and CSS features that were previously unavailable or too buggy to be practical. What's more, these modern browsers finally (in large part) follow a common set of standards as specified by the World Wide Web Consortium. This is a great development for those of us on the creative side of the World Wide Web.

There's still one thorny problem to face, however: How do you take advantage of these new methods and features but still accommodate users of version 4 and older browsers? Statistics for browser usage are in a constant state of flux, but as of this writing, a small yet still significant number of web surfers are using version 4 browsers.

Up until now, you have probably been accommodating users of older or alternate browsers using "browser sniffing" methods to redirect them to other pages, writing alternate content onto the page, and so on. However, this can greatly increase the time and cost needed to create and maintain a site.

In extreme cases, you may even have closed off users of older and alternate browsers by telling them that your site can only be accessed with certain browsers. This only invites resentment from your site visitors, who may never return to your site.

The method introduced in this project is called graceful degradation. Essentially, this means that you while you may design your page so that it's optimized for modern browsers, at the same time you ensure that the content of your site is viewable in older or non-graphical browsers. The goal is to make the same pages viewable and useable by the widest audience. See the "How It Works" sidebars at the end of this project to see how this is accomplished.

  • + Share This
  • 🔖 Save To Your Account