HTML and CSS Reference
In-Depth Information
Although there is often a blurred line among these layers, the concept of separating
content structure and style from behavior has become the goal for many developers
building accessible and yet easy-to-maintain Web sites. The idea of keeping JavaScript
completely separate from the other two layers is commonly called unobtrusive Java-
Script. Developers have been keeping the structure and style of the document separate
by placing the HTML/XML in one file and the CSS styles in a separate file, making it easy
to change the layout throughout a Web page simply by changing the style sheet. Next
comes JavaScript. Because JavaScript functions can be placed in separate files, the goal
is to remove the inline JavaScript code, such as event handlers, from the HTML page,
leaving the markup clean and yet still keeping the JavaScript accessible. Another func-
tion of the separation is for better practices such as adhering to the W3C standards and
DOM scripting to avoid problems with nonstandard browser extensions and inconsis-
tencies. Finally comes another important aspect of unobtrusive JavaScript, a strategy
called “progressive enhancement” coined by Steve Champeon in 2003. The idea was that
the content of the page would be made available to the browsers with the least capabil-
ities, even those without JavaScript support. Aaron Gustafson describes in his article
“Progressive Enhancement” the three layers of a Web page by using the analogy of a pea-
nut M&M where the content layer is the peanut, the presentation layer is the chocolate
layer surrounding the peanut, and the client-side scripting layer is the hard candy on the
outside. He explains, “Then there are folks who can't handle the chocolate and candy
layers on top of the peanut (diabetics, for example). Like them, people on mobile
devices or older browsers may not be able to see your pretty design or interact with your
slick Ajax-driven interface.” The idea is to make the content as rich as possible so that
everyone gets the best possible experience, no matter what browser they are using,
rather than being forced to upgrade or just go without any experience at all. (See for more on this
subject.) There are a number of articles and forums on the Web offering guidelines on
how to accomplish this “unobtrusiveness” both for and against it (see Figure 15.47). It
is definitely a topic worth investigating if you are planning a serious Web project that
will affect many users.
Now that we have discussed how to use the DOM to manipulate the HTML elements,
to handle events without using HTML tags, and how to use CSS styles, it is time to put
all the pieces together to illustrate the separation of the layers. Example 15.25 is an .html
file that describes the HTML content layer, Example 15.26 is a .css file representing the
CSS layer, and Example 15.27 is the .js file, the JavaScript program that provides inter-
activity and behavior. Together, these three files make up a simple Web page with a slide-
show of images. The HTML markup is defined in the .html file; the colors, borders, and
div positions are defined in the .css file; and the JavaScript program provides the behav-
ior and interactivity with functions that respond to user-initiated events (see Figure
15.48). These files are intentionally kept small for demonstration purposes so that you
can see the forest for the trees, rather than getting lost in long files cluttered with detail.
Search WWH ::

Custom Search