WebReference.com - Part 1 of chapter 1 of Cascading Style Sheets: Separating Content from Presentation, from glasshaus (5/5)
Cascading Style Sheets
In addition to using non-standard tags like the
element and abusing tables for page layout purposes, web authors have
attempted to overcome the shortcomings of HTML by placing text in images that
are then loaded into the page via the
<img> element, or
building whole sites in proprietary technologies such as Flash, a plugin application that loads
in a browser window. Both of these techniques afford the designer much greater
control over presentation than HTML does Â especially typographically speaking,
basically giving free reign on typeface, color, and layout. When compared
to the meager presentation control HTML affords, even when using
<table> a web site built with images instead of text
is indeed very attractive.
However, such practices have negative consequences. They destroy the structural validity of a web page's markup. This results in the following problems:
- Degraded performance
- Increased production work
Something not at all immediately apparent to most web professionals, even experienced ones, is that the Web's audience is not limited to users of Internet Explorer and Netscape Navigator. In addition to these premier visual browsers, there are a plethora of other visual browsers that have smaller but not insignificant groups of users. The Opera browser, Konqueror, Icab, Omniweb, and countless other browsers are used by many web surfers, chosen because they are typically faster at rendering pages than the big two, have a smaller disk footprint, or are less prone to security hole exploits.
In addition, the Web has already spread to the TV with the Webtv browser, and web browsers are now a standard feature on digital phones. Browsers are currently being built into appliances, so you can shop for groceries online from your refrigerator, or call up a recipe from an online recipe archive right in your kitchen. Perhaps most importantly, special software, such as a screen reader, helps the blind to access web content. With good solid structural XHTML markup, each of these various Internet devices can have equal access to your site's content.
In addition, the US federal government has even taken steps to ensure the accessibility of all federally run web sites. The site http://www.section508.gov details these federal requirements, and many states are currently enacting similar legislation to ensure these are fulfilled on their state run sites. Such guidelines, though unfortunately smacking of bureaucratic red-tape and regulations, are forward-looking and actually quite in keeping with the spirit of the Web.
Bad HTML practices used to achieve your layout and page
design goals can actually make your pages load more slowly in the browser.
<font> elements or
inserting site copy into images adds bulk to each web
page. Not only does that bulk require more time to download, it slows the
browser's rendering engine down when it tries to display the page. It's a
double whammy. Nested tables, which were almost a necessity when trying to
achieve complicated table layouts, increase rendering time logarithmically
in many common browsers as tables are added to the markup of a page.
Increased Production Work
Web site maintenance is an often overlooked consideration in the world of web development and design. All too often, client pressure to quickly produce a site that looks the same in IE and NN results in negligence on the part of the web professional, who pushes to complete the work quickly and easily, often testing the site only in browsers likely to be used by the client. It is often a difficult task to educate the client on the importance of any factors other than how the page looks in IE, although the lesson is sometimes learned later when site maintenance costs accumulate.
The fact is that reliance on HTML presentation hacks can seriously affect the maintainability of a site; not only does the site risk future obsolescence as newer browsers are introduced, but simple changes to a large site can become a nightmare of "search and replace", with fingers crossed.
Inserting presentation rules directly into HTML documents
<table> tags creates
a maintenance headache, as any changes to the site presentation
must be made on each document. Even before the site launches, implementing
client-requested changes to a site under development can be a headache if
a hundred HTML documents need to be changed for simple layout tweaks.
[Continued in part 2... -Ed.]
Created: June 10, 2002
Revised: June 10, 2002