Benefits of Style sheets
When we talk about standards-compliant design, we are talking about the use of style sheets to separate presentation from the content and structure of a document, the markup. But why is this so beneficial? Haven't designers been using presentational elements in design for years with great success?
Certainly, there was a great deal of innovation in web design, given the
adhoc nature of the web's development, but as I explained last week, it came
at a high cost. This cost was borne by the designer, in the form of
undue time, effort and
frustration; and the user, in the form of browser-specific websites and
broken webpages.
Last week, I listed the top ten
benefits of standards-based coding
.
This list
warrants an explanation of those benefits, and I'll deliver that now.
Efficient Code
Before the advent of style sheets, all presentational characteristics of the
content were coded directly in the markup. Several presentational elements
and attributes, such as FONT, CENTER, ALIGN, COLOR, and FACE, were embedded
amongst the content, adding significant overhead to document sizes. The aggregate
of the overhead could be quite appreciable in a large site
with scores of pages.
Style sheets solve this code bloat by removing all presentational information from the markup. A common style sheet can be shared by multiple webpages in the website; thus, presentational information could conceivably incur no more overhead for a thousand page site than it would for a one page site! This delivers benefits in download speeds as well, since there is less data to download for a page, not only because the markup has no presentational code, but also because the style sheet is cached by the browser.
Greater control over design
CSS properties provide powerful presentational properties that far exceed
the capabilities of the presentational tags and attributes of HTML 3.2
(Style sheets were introduced in HTML 4.0).
Rather than list the many capabilities that are now possible with CSS,
I will simply direct you to
Eric Meyer's Spiral Design
page.
First, do not view this page in IE6/Win—it is not standards-compliant,
so it does not render the page properly.
Notice the transparent layers. Notice that the background image remains
fixed in the browser viewport while the page scrolls.
The navigational rollover effects are accomplished without JavaScript, and
using only text—the navigational buttons require no images.
Consistent Rendering
Last week, I mentioned the issues that arose as a result of the proprietary features offered by each browser vendor. In short, a web page would most likely render differently in different browsers if the page was anything beyond a basic design. In the extreme, the results rendered the page unuseable.
Modern browsers and standards-compliant design change all this. Browser-specific code is no longer required, and a web page renders as designed, independent of the browser and the platform. Admittedly, that's the theory. Of course, the reality is that IE6/Win still has the greatest marketshare, and it is only pseudo-standards-compliant, so until IE6/Win is but a blurry entry in the history of the web, IE6/Win browser hacks are still necessary when you do a design in 'the real world.' Fortunately, for this course, you don't have to concern yourself with IE6/Win, and you will be developing and testing your designs on modern, standards-compliant browsers.
Maintainability
The code-sharing aspect of style sheets has all the benefits of code-reuse that exist in traditional programming, where functions or methods are stored in libraries, and can be used over and over by different processes.
For the web designer, keeping all presentational information in a style sheet means that a simple change to a site's design is expeditious. For example, let's say that you needed to change all H3 tags from red to blue. Suppose that your site had 50 pages, each averaging about five heading each. You would have to ensure that you made the change to about 250 instances of H3.
If you had designed your page using presentational markup, you would have to
open 50 files, hunt down each H3 tag, and change the
COLOR attribute to blue for each instance of H3.
If you had designed your website using style sheets, you would make one change to your style sheet—you're done!
Accessibility
As the Web community grows and its members diversify in their abilities and skills, it is crucial that the underlying technologies be appropriate to users' specific needs.
Web standards were designed to make Web pages more accessible to those with physical limitations.
Style sheets enable accessibility by allowing the user to employ a user style sheet
in the browser to view a page.
For example, a visually impaired user could specify a style sheet that sets text in a large font, displayed in high contrasting colors for optimum viewability.
Web Accessibilty is a hot topic. Find out more by visiting the
Web Accessibility Initiative
website.
Style sheets also allow a page to be rendered optimally on a wider range of target media (tty, braille, etc.), as I will discuss next.
Targeting different user agents
Style sheets allow the design of a document to be easily and quickly altered.
Take a moment to visit the
CSS Zen Garden
.
Poke around for a moment, selecting various designs. ... I'll wait ... Good, you're back.
Quite an interesting variety of designs, isn't it?
What you might not have realized is that every design that you see in the CSS Zen
Garden uses the
exact same markup
!
The only difference is the style sheet
that is applied to the markup. Really! Pretty impressive, isn't it?
By now, you should be realizing the true power of style sheets!
Well-designed webpages that separate structure and presentation adapt more easily to new technologies. The CSS Zen Garden demonstrates how you can drastically change a design without modifyng the content of the document. Let's take this one step further. With the growing number of web-enabled wireless devices like phones and PDAs, the ability to deliver content on various user-agents becomes increasingly important.
CSS gives the designer the ability to specify different
style sheets for different devices
,
such as handheld devices, printers, braille feedback devices, and TVs.