The promise of style

April 9, 2001

I know I’ve said it many times before, but you really should use stylesheets. Using cascading stylesheets makes your pages trimmer and faster for readers to download. It makes your HTML code easier to read and maintain. It makes your sites easier to design and redesign. If browser manufacturers supported CSS properly, Web designers would be more productive and much, much happier.

In case any of you aren’t convinced by this, I have provided an example of just how radically you can revamp a CSS-based site by only editing the stylesheet. It’s not just a matter of changing colors and fonts. You can also rearrange design elements completely.

Look Ma, no HTML changes

The following example layouts are all based on the same source, just with a different stylesheet. The only change to the HTML is the single-character change to link to the relevant stylesheet. That is, given one of these designs, you could revamp your site to another of these designs by editing one file, not every document on the site. Have a look at the source of the stylesheets and see how I did it.

Before we start, a warning: this column is all about what is possible in the more recent browsers, not what is feasible given the population of browsers actually used. The designs are for illustrative purposes only. They work in IE5 for the Mac, Opera 5 Preview for the Mac, and other than the last one, in Netscape 6. The first two look wrong but vaguely reasonable in IE4.5/Mac as well, but making inline content like links into blocks sends everything crazy. They all look vile in Internet Explorer 5 for Windows, but possibly work in the Version 6 beta (please let me know). I can’t guarantee that they won’t crash some version of IE4 or Netscape 4, so please don’t email to tell me how bad they look in your browser – I know. Non-CSS browsers like iCab Preview or Netscape 3 won’t get the pretty formatting, but they will display all the content, which is exactly what the principles of graceful degradation indicate should happen.

First, I present a version of the existing design (short page, long page), but done without tables. There were a few compromises I had to make, the main one being that you can’t fix the height of the two columns of content to be equal. I guess I could have put the three regions on the right into another nested DIV and played with the height CSS style, but this doesn’t really work in more than one existing browser simultaneously. This is the starting point.

The second version is similar (short page, long page), but I shifted the top navigation and latest-features navigation onto the right-hand side. Instead of being text links running horizontally, the section navigation is a vertical list of buttons with rollovers. This is done using CSS, not graphics and JavaScript, which makes the page a lot trimmer than an equivalent page designed the traditional way. Despite these changes and the deliberately different colors (sorry, I didn’t change the logo), this is still identifiably MacEdition, with the dark border and colored margin.

The third design (short page, long page) breaks with that look. Now, the top advertisement is alongside the logo, and the right-hand navigation spans the whole page, instead of the masthead area spanning the width of the window.The fourth one (short page, long page) is the only one that uses any absolute positioning, and in many ways it demonstrates that even the most standards-savvy browsers aren’t ready for some of the more advanced features in CSS2. Unlike the other designs, it doesn’t work in Netscape 6.

Opera Preview 1 for the Mac suffered from some odd redraw problems when scrolling, but these were fixed in Preview 2. But it’s cool: the masthead, advertising and main navigation on the left side are fixed in place, while the right-hand latest-features strip and the content scroll. There are no frames here – you couldn’t do frames in this irregular shape – just some judicious use of the position:fixed CSS2 style.

I am not suggesting that these are necessarily great designs; I knocked them out in half an afternoon. There are things about the code that could be trimmer, especially the overuse of class attributes in the sidebar text.

Also, the existing design’s black border meant that I had an enclosing DIV element that needed to be dealt with carefully in the other designs. In the third and fourth designs, where the arrangement of elements was very different, I cheated by declaring that outer DIV to have a display:inline attribute. If my starting point had been some other site, I could have gone even more nuts with rearranging design elements.

Nonetheless, they demonstrate my point: full adoption of CSS, even just CSS1, would allow you to redesign your site radically by editing a single file. You don’t need JavaScript. For many designs, you don’t even need absolute positioning. The float: and clear: styles are sufficient for many designs. Naturally, if you want to add new design elements like a second layer of navigation or breadcrumbs, you will still have to edit the HTML. But CSS and some server-side includes to insert the content of the navigation areas will get you a long way.

Still waiting and working around

Even in the latest browsers, there are some glitches. In addition to the fixed positioning problems I noted earlier for Netscape, IE5 displays the “Send this story to a friend” button with the wrong margins and puts horizontal scrollbars on the third and fourth designs for reasons I don’t understand. Fixed positioning also breaks the rollover effect on the buttons in the fourth design in IE. Opera has some very odd interpretations of margins on floated elements. (Owen Briggs has been working himself into the ground documenting all these little glitches.)

Still, it will be a great day when we can use these CSS techniques with confidence. That will be the day that, when the client’s project manager calls you to say, “Bad news. The CEO wants the navigation on the right-hand side now,” you can pause, make a few changes in your editor while swallowing that much-needed mouthful of coffee and reply, “Done.”

That day isn’t here yet. I’m waiting. And whether you realise it or not, so are you.

— CodeBitch (codebitch@macedition.com) is the grumpy cow who does the HTML production for MacEdition. She would like to thank Guy Hail, amongst others, for encouragement and ideas on the DIV-based MacEdition layout.

E-mail this story to a friend