Pages

9/20/2009

Style Sheets and XHTML

Cascading Style Sheets (CSS) is an enormously powerful tool that has been slow to catch on in the HTML development world. Whether or not you use (or like) CSS, the continuing evolution of CSS is deeply intertwined with the work moving forward on XHTML so learning about CSS can help you understand XHTML as well as implement it. Fortunately, CSS isn't very difficult once you master a few key structures and learn to apply its vocabulary. There are some real problems with existing CSS implementations that I cover later in this article, but future XHTML work probably should make as much use of CSS as possible.

Note Cascading style sheets is an enormous specification in itself, worth a article or three on its own. This article gets you started in CSS, but you'll want to find additional information if you move into CSS in a big way. The latest information on cascading style sheets from the W3C is available at http://www.w3.org/Style/CSS/. The discussions in this article focus on CSS Level 1 and CSS Level 2, both of which are stable as paper specifications if not completely implemented. The ongoing development of CSS Level 3 is likely to bring some significant changes to the XHTML landscape, and is definitely worth following. For a current list of CSS work, see http://www.w3.org/Style/CSS/current-work.

Separating Format from Content

CSS was one of the W3C's earliest efforts at separating formatting information from document structure in HTML. This recurring theme has been at the heart of most W3C HTML activity since HTML 4.0's start, and CSS is a critical ingredient in implementing that project. By providing a simple set of tools that exercise much more thorough control over presentation than HTML itself, CSS was supposed to lure developers away from the millions of FONT tags used in HTML documents. CSS is the carrot; HTML 4.0's (and XHTML's) deprecation of the FONT element is the stick. CSS offers document designers a number of key features that are nearly impossible to implement effectively with straight HTML (even if the FONT element is used). CSS also provides reusability. The formatting descriptions applied to documents can be applied to any document with the same vocabulary. CSS even lets you create style sheets that address particular situations within a given vocabulary, specifying formatting based on nested element structures or attribute values. You can make tens of thousands of HTML documents use the same formatting just by connecting one line of code in each document to the same CSS style sheet. This also makes it easy to change formatting across all of those documents because changes made to the master style sheet are reflected in all the documents that use it. Managing presentation is much simpler when all it takes is a change in a style sheet rather than a search-and-replace across thousands of documents.

Tip Keep your style sheet documents in a safe place! Any time your documents refer to a central style sheet, you can use that resource to modify the presentation for all your documents. It makes it easier for you to make the changes, but attackers potentially could modify the style sheet to graffiti your pages. See the first part of David Megginson's "When XML Gets Ugly" presentation at http://www.megginson.com/ugly/index.html for some of the attacks you should watch out for. Although a single master style sheet for a site is attractive, sometimes you need to change a presentation for a particular unit of an organization, a certain document, or even a certain element. The "cascade" in Cascading Style Sheets enables you to handle this problem easily without requiring constant cut-and-paste to create customized style sheets. Style sheets and documents can reference multiple style sheets, and CSS provides a set of rules for resolving where to use each style. HTML and XHTML provide extra hooks – the class and style attributes – for connecting style-based formatting to particular elements. (The hooks aren't as necessary in XML, where developers have more control over the vocabulary.) Cascading Style Sheets also enables designers to get out of the complex business of formatting HTML generated by server-side programs. Rather than having to edit templates filled with programming code, designers can agree with programmers on what the output of those programs should look like and then design style sheets to match without getting directly involved in the code. On the client side, CSS makes it easy for programmers to reach into the formatting created by document designers and change it when appropriate; thus, designers do not have to build styling specific to a page. While designers and programmers sometimes have to work closely together in both client- and server-side development (and sometimes they're the same person), CSS makes it easy to divide responsibilities cleanly. Finally – although this isn't implemented widely in browsers – CSS offers mechanisms that enable users to specify how content should be formatted. Combined with the emphasis on accessibility that has influenced much of the CSS process, this enables readers to access information in a format that's comfortable for them. Some readers need larger font sizes, while others just want to get the information in as compact a form as possible. Still other readers need aural (audio) presentation of the content – either because they can't see it or because, for instance, they're driving their cars and checking the news. Some designers grit their teeth at the prospect of users changing their carefully built designs, but for many users this critical issue determines the Web's usefulness for them.  

No comments:

Post a Comment