Wiley CSS Instant Results 978-0-471-75126-7 사용자 설명서

1

Tabs

Tabs have become fairly ubiquitous in web design — you can find them nearly anywhere you look
these days. (Apple.com is a great example of a mainstream site that implements tabs.) Earlier web
design relied more heavily on image maps or on simple linked images and tables to create tabs. This
chapter discusses several techniques that employ CSS for tab implementations, which naturally
lead to more meaningful, accessible markup.

Each of the major browsers is capable of stable, simple, friendly tab designs. Some caveats still
remain, however. As with most things CSS, not every approach will be cross-browser friendly, but
this chapter covers all the necessary workarounds and outright hacks required to make a tab
implementation shine in as many browsers as possible. Later in this chapter you see how an open
source JavaScript named “IE7” helps bring compatibility to Internet Explorer 5.5 and 6 for some of
the more advanced approaches, and how sometimes a little JavaScript goes a long way to bridge
compatibility gaps between browsers, not only with the open source IE7 JavaScript, but also using
other JavaScript-centered tools, such as Internet Explorer’s proprietary CSS feature, 

expression()

,

which also plays a large role in many of the projects presented in this book.

Before presenting the tabs project, some planning is required. You should ask, “What do I expect
of the tab implementation?” The following list outlines the design goals of the tabs project:

❑

The tabs must be contained in simple, meaningful markup.

❑

The text of each tab must not be images.

❑

A mouseover effect must be supplied for each tab so that the tab changes color when the
user’s mouse is hovering over it.

❑

The tab of the currently loaded page must be highlighted.

The next section discusses the CSS, XHTML, and JavaScript components that play a role in meeting
these goals.

04_75126x ch01.qxp  3/8/06  10:24 AM  Page 1