Cascading Style Sheets, Promise vs. Reality, and a Look to the FutureBy Mark NewhouseCascading Style Sheets (CSS) are a technology with a lot of promise, but their often-hyped potential leaves some designers feeling blindsided by the 2×4 known as reality. This article sorts out the differences, and makes a case for educating yourself now in preparation for the future. Getting your feet wetYou’ve heard it in web design forums and on email lists. You’ve read about tossing tables in favor of standards-based CSS layout on sites such as A List Apart and Web Reference. Maybe you’ve visited some sites that offer ready-made, table-free templates. So you dig a little deeper and start discovering little discrepancies in browser implementation. And then you realize that some of the discrepancies aren’t so little. “Box Model Hack? What’s a box model?” you wonder, muttering under your breath. “And what the heck does voice-family: “\”}\””; mean, and how does it apply to creating a style sheet?” You’ve come to realize that CSS isn’t the panacea it’s been made out to be; there’s a great chasm between promise and reality. Closing the gapBut is the canyon really that wide? Remember how you struggled to master tables? And now you can write them in your sleep. Maybe there is something to this CSS thing after all. If this is where you are at in your understanding and use of style sheets, you aren’t alone. The comfort and familiarity of table-based layouts make them hard to give up. As you examine some of the promises of CSS in light of both current reality and the longer-term future, I hope I can make a case for encouraging those of you who are sitting on the fence, to come down on the side of CSS and well-structured (X)HTML. I think you’ll find the grass really is greener over here. And, if you don’t like green grass–just apply a new style. So let’s take a look at some of the promises that CSS makes, examine the current reality, and see if we can look into the crystal ball to see what the future of style sheets is. Promises, promisesPromise: Style sheets will eliminate the need for complex, table-based layouts. Reality: Although browser support for CSS-layouts is improving steadily, there are still many browsers that don’t handle positioning well enough for everyone to make the switch. And even among the popular browsers that do allow for positioning there are enough different interpretations, and misinterpretations of the box model and other things, that in many cases we’re simply exchanging one set of workarounds for another. At least the new workarounds validate. But as long as your clients want it to look the same in Netscape 4.x, you’ll still be hanging most of your designs on a basic table layout (see the New York Public Library Online Style Guide). Future: Once browsers have full CSS1 and CSS2 support, and users have all upgraded, we can toss the workarounds that we are using now (and likely find new ones for misimplementations of CSS-3 and beyond). If we use markup now with this future in mind, it will be as simple as dropping the basic.css in favor of the advanced.css. We’ll also be able to toss TABLEs in favor of DIVs. Promise: Style sheets allow for true separation of style and content. Reality: The preferred reading is “separation of style and structure.” And CSS allows for that, but with the understanding that this is closely tied to the first promise mentioned here. As long as we have to make things look the same in Netscape 4.x, we’ll have to forego this separation for awhile. And just because you are using CSS doesn’t mean you are automatically authoring your structure correctly. As the W3’s CSS validator states: “To work as intended, your CSS style sheet needs a correct document parse tree. This means you should use valid (X)HTML.” Future: The future looks good for this one, assuming that everyone grasps the concepts of style and structure. This is an important part of the standards movement, and it will only be a matter of time before everyone, and all WYSIWYG editors, are using well-formed XHTML for document structure and correct, valid CSS to style the document. Promise: Style sheets give you absolute control over the way your document looks. Reality: The end user will always (and should always) have the final say about how your web site looks in their browser. The sooner web designers concede that fact, and start designing for the web (and not print, or television, or another medium), the faster we can move ahead in this exciting, and still new, era of web design. For those who can’t cope with this idea, there is always Flash and PDF. Future: Absolute control of a document’s layout has not really been a promise of CSS for some time. It is true that CSS does provide mechanisms for creating a precise, pixel-based layout. And this layout will look the same in all appropriate user agents–until the end user overrides it. Since most end users won’t know how–or even that you can–override the author’s style sheet, most will see the page just as the author intended. Promise: Using style sheets makes your site more accessible. Reality: Used properly, along with following all the other Web Content Accessibility Guidelines, style sheets will go a long way in helping create accessible web sites. That’s a lot of conditions. What style sheets do help with is laying out a page without resorting to complex, nested tables to get the effects that you might want. Before style sheets, if you wanted a border around your content you had to nest a table inside of another table. More tables were often added later for menus, pull-quotes, sliced images and so on, leading to an accessibility nightmare. Style sheets alone don’t solve the problem, but they do play an important role in the solution. Future: The good news is accessibility issues are being addressed, not only in the browser arena, but also in the tools that help you build web sites. The current batch of tools tend to rely upon FONT tags and the table and spacer gif hacks of old. But, now that modern browsers can handle the CSS that replaces those hacks, the most recent versions of Dreamweaver and Golive are addressing those issues. Promise: Style sheets make your markup leaner, and your page download faster. Reality: Used properly, style sheets do in fact make for leaner code and faster loading pages. Creating a linked style sheet that works on all pages on a site means it is downloaded once and cached by the browser. Pages that need special styles can include them in their headers, or in a separate linked style sheet. Further, using style sheets for layout eliminates the need for complex nested tables. Using the :hover pseudoclass on links eliminates the need for additional javascript and images to be downloaded. Using a non-repeating background image means you don’t need to add additional blank space to the right and below the background image to keep those with large resolution monitors from seeing a repeating background. All of this adds up to a lot of saved bandwidth, especially when multiplied over many site visitors. Future: The good news is that most of this can be done today. And when future browsers get everything right, we can create even leaner code by eliminating current workarounds. Promise: Using style sheets now ensures that web sites will be compatible with future browsers and future versions of X(HT)ML. Reality: This is all based on the assumption that future browsers will conform to whatever standards are in place in the future. This is a bit of an unknown at this point as no current browser gets even all of CSS 1 right. Future: The key here is that if your pages validate now, it will validate in the future, and future browsers will understand how to interpret the DOCTYPE declaration that you have used for your documents. Promise: Style sheets ensure that web pages work in all possible web browsers/user agents. Reality: There aren’t that many alternative user agents (UAs) out there yet for testing this theory. Other than the typical PC browser, most of the current UAs do not yet understand style sheets. Browsers for small screen devices such as PDAs often ignore style sheets. Instead, these UAs use table hacks and the like to reorganize the content in a linear fashion for delivery on smaller screens. Cell phones use a completely different markup language. The most popular screen readers and aural browsers are not yet up to speed on using any of the styled cues that are a part of CSS 2. Browser makers are still trying to work out how best to handle print specific styles such as page breaks. Future: It can only get better from here. The question really is how fast will these devices catch up to the current specifications so that we can use the full power of style sheets to deliver our content in the most appropriate way for each device. Promise: Style sheets make web sites easier to maintain. Reality: When style sheets are used correctly, along with a correctly structured (X)HTML document, they do make a site easier to maintain and update. It is possible to change the complete look and feel of a page or an entire site by simply applying a new style sheet. Chris Casciano created 20 such changes to his site during the month of February this year. And there are a number of articles on the web describing different methods for swapping styles on a page or site, if you want to give it a try yourself. Although it is indirectly related to style sheets, using correctly structured (X)HTML in favor of table and GIF hacks makes the marked up files themselves easier to read, and thus, maintain and update. There is less time spent searching through the mess of nested tables to find the content that needs to be changed. And when the style is contained in a different file, you are less likely to create problems with the layout while updating the content. Future: The future is here. A well-structured document can have multiple style sheets applied to it now, and things will work as advertised. Change is as easy as uploading a new style sheet. Promise: Style sheets are fun to work with, provide creative challenges, and new learning opportunities. Reality: When you are just getting started with style sheets, they may not be too fun, but they certainly challenge your creativity, and the learning never stops. And once you get your mind around how things work with style sheets, you’ll find the challenges are more fun than frustrating. Future: With no browser yet supporting even the full CSS 1 recommendation, let alone CSS 2, and the W3 still ironing out the specifications for CSS 3 and beyond, I think the future will be full of challenges, opportunities to learn more, and a whole lot more fun. Put on your shadesCSS is the promising young recruit who hasn’t realized his full potential. In this case, we are waiting on the browsers to mature and develop enough to handle all that CSS has to offer. However you look at it, the future looks bright! ResourcesDigital Web Magazine’s CSS resources A List Apart articles about CSS Web Reference article on CSS layouts New York Public Library Online Style Guide Web Content Accessibility Guidelines Chris Casciano’s CSS experiment Alternative Style, from A List Apart |