« Why The Carrot Patch? | Main | Why the Internet is not a magic bullet »

July 13, 2004

Why CSS?

A few years ago, I thought I would try manipulating the layout of a web page using Cascading Style Sheets instead of tables. I tried a three column tabular layout (little did I know that multiple columns was, and still is, something that CSS doesn't handle all that well). At the time, Netscape Navigator 4.7x was still very popular, but some were using Netscape 6.0, and of course many were using Internet Explorer (5.x, I believe). It took me an inordinate amount of time to get the page to come out the way I wanted, testing in three browsers, and to test out "graceful degradation", I also tested in each with CSS support turned off.

This experience turned me off CSS, until just recently. A few key things have changed:

  • The major browsers now have much better support for CSS.
  • Netscape 6 and Mozilla are now widely used within my company's intranet, and I no longer worry about supporting Netscape 4 users.
  • I learned a better technique for defining style sheets: descendant selectors.

You see, as a veteran of Adobe FrameMaker, when I first tried to write stylesheets, I mapped the concept of a class to paragraph styles and character styles, which naturally led to a profusion of classes. This would be fine if I used an HTML editor/word processor, but since I write all my web pages by hand, the resulting "classits" was much too painful.

Then, earlier this year, I stumbled across some references to web page menus being generated solely with CSS and HTML, and I came across the css-discuss Wiki, which led me to other articles on CSS such as those found in A List Apart (I had read articles on this web site before, but I believe it was prior to the development of CSS). I subsequently read Eric Meyer on CSS, by Eric Meyer, and I was hooked on using descendant selectors.

The basic idea is to define major sections of your document by adding a class or ID to an outer element, such as a <div>, and then to define styles for your everyday HTML elements when they exist within the outer element, using a descendant selector. No more need to manually type in classes for every paragraph! Just adding a class to one outer element will do.

Now, everything I write in HTML I want to style with CSS... This blog, even though it is in its infancy, is no different.

Another key change in thinking that has helped me is to shift from "graceful degradation" to "selective enhancement". In the past, when I tried to create effects using various HTML techniques, I always had to test the results in multiple browsers with CSS turned on and off to check that the results would work in each browser. This was an enormous pain and so I never wanted to go beyond your everyday HTML or very simple CSS properties.

Now, following the idea of selective enhancement, I try to write a plain, simple HTML web page that I know will display fine without CSS, and then I use descendant selectors to enhance the appearance. I don't bother testing without CSS, both because all the major browsers now support CSS fairly well (and I'm still planning to stay out of the darker corners to avoid the many Internet Explorer bugs), and because I know the simple web page, although not very attractive, will display all the basic content.

Posted by Isaac at July 13, 2004 9:58 AM