Modifying the XHTML Markup to Call the Functions (Cont.) - Page 9
June 14, 2002
Figure 12.6
The user mouses over another tab, and the text and background colors change.
Figure 12.7
The user clicks the tab, and the new content box appears. Because the whole
page is already loaded, the change occurs right away. The tab's appearance
changes to the "active" state. Note how the tab is stacked on top
of the content box.
How It Works: Gracefully Degrading Pages with CSS - In this project,
we have dealt with the issue of creating a page that degrades gracefully in
older browsers in two ways. The first is with a planned use of the varying
support for CSS rules.
To review, our main goal for this project was to create a page that is
readable to all and reasonably attractive to users of browsers with partial
CSS support—while still avoiding the use of styling tags such as <font>
within the markup itself.
The CSS for this page has been separated into two documents. The first
one contains the rules that will be recognized by Netscape 4.x. This is
so that the page looks reasonably attractive in that browser. Generally
speaking, these are the style rules for font appearance as well as background
and foreground colors. Some basic margin property values are also included.
The second stylesheet, advanced.css, contains the rules that are not well
supported by Netscape 4.x or any other browser with only rudimentary support
for CSS. Because advanced.css is associated with the base XHTML document
using the @import property, the whole stylesheet will be ignored
by those browsers that don't support @import. Some of the rules
in advanced.css override the ones in common.css by declaring them to be
!important. It's always important to remember to arrange the
markup content in a way that is logical for people who are using non-CSS
enabled browsers.
Figure 12.8
How the page looks in Netscape 4.x, which only recognizes the style rules
included in common.css. Note how the "header" text for each section
is actually the text contained in the tab tables. Here this text is set to
a large size (font-size: 18px); this is overridden in the advanced.css stylesheet
with !important (font-size: 12px !important).
How It Works: Gracefully Degrading Pages and JavaScript - In the
previous projects, most of the functions we created had a number of if...else
statements that specified different code for different browsers. In this project
however, there are only two browser-specific if...else statements in
the whole tabs.js script. The first one, in the tabcolor() function,
deals with the fact that the syntax for cursor styles for Internet Explorer
and Netscape 6 differ. The second one, at the beginning of the choosebox()
function, specifies that the function will only execute if the browser in
use recognizes document.all or document.getElementById.
The tabover() and tabout() functions, on the other hand,
don't have any if...else statements that "sniff" the
browser out. Instead, the functions are called from within div elements
rather than from a (link) elements. Modern browsers allow for JavaScript
events to be called from any element, while it's only possible to call
JavaScript events from a limited set of elements in older browsers. Netscape
4.x, for example, will simply ignore the onmouseover, onmouseout,
and onclick event calls in the div elements.
When creating a "gracefully degrading" site, the visitor should
never get the impression that they are somehow getting a lesser version.
Ideally, he should never know what he is missing—unless, of course,
he revisits the site with another browser!
Modifying the XHTML Markup to Call the Functions - Page 8
JavaScript + CSS + DOM Magic
|
