CSS Hurdles

Dave Winer hast posted a list of hurdles CSS must overcome. I’d like to address these points about using CSS from the point of view of my experience.

I’m very pleased that Dave is interested in supporting CSS and learning more about it, even after some of the negative responses in the discussion.

1. Installed base.

   Millions of people know how to do basic HTML. They don't know CSS. People who know how to layout with tables in all likelihood will continue to do so.

   It’s important to separate different types of authors. The writer who uses Manila or Radio to edit the body of a page or a block of text for a weblog—and never looks at the advanced prefs page—will always just be using basic HTML. She doesn’t even have to know that the site has a stylesheet. See my earlier post for more about this.

   On the other hand, I’m the designer who messes with all of the templates and sub-templates in Manila and Radio. Yes, I’ve invested quite a bit of time learning to implement CSS. But it lets me be much more productive in some aspects of layout work. For over a year now, I’ve been eliminating the spaghetti of nested tables in the membership boxes and other parts of Manila sites, and replacing them with very simple HTML and a few lines of CSS.

2. It's confusing.

   This might be solved by a streamlined howto. CSS for Newbies. Going crazy with CSS. Easy to read. Self-deprecating. No preaching. Edited over and over to take out the zealotry (even advocacy). Maybe this hurdle can be erased most easily, but right now it's hard for a busy developer to find all the information needed to be successful, in one place. (BTW, you might consider the Manila theme to be a milestone for CSS. I was able to create a CSS-based site in about a minute, even though it would have taken hours starting from scratch.)

   This is true, it is hard to get started. If I recall correctly, I began with a few tutorials at webmonkey.com and builder.com.

   (By the way, I was somewhat shocked when I read Cameron Barret’s post regarding being stuck with table-based layout using Manila. Manila is a great environment for using CSS. The template system and macros are perfect for generating all of the page structure elements that are repeated in different parts of the site, while a style sheet can be used to format it all.)

3. All those "non-conforming" sites.

   At best the Web five years from now will be 50 percent CSS and 50 percent table-based. Browsers will still have to support tables for layout.

   This is true, and it must be a huge headache for the people who are making web browsers. The latest versions of Mozilla and MSIE have implemented Doctype switching which should keep this from being a problem for us web surfers and designers in the future, though.

4. It's weak.

   I still want lineto, moveto and drawstring. That would be worth converting my brain to. (Hardly any conversion needed, I already know how to do it from programming in C.)

   True that CSS doesn't have features like that. It was concieved as a set of formatting and layout rules and not a procedural language for creating graphics.

   Today we have Flash, which is not popular among advocates of web standards (although there seems to be some activity in this area). Perhaps someday SVG will have broad browser support.

   On the other hand, CSS is also powerful. I can edit a tiny text file using SimpleText to change the look of a huge web site immediately. No rendering of pages required. Even better: The best thing CSS has done for me.

5. It's incomplete.

   Look at all the problems people are having doing basic webloggish things in CSS. Is it worth the pain if the result is less functional than that it would

   Browser support is definitely incomplete, although it seems that Opera, Mozilla, Netscape 6, MSIE 5/Mac and MSIE 6/Win have done a pretty good job.

   Our knowledge of how to use CSS also needs a lot of work, just like ‘the old way’ did until David Siegel showed us how. Some people are working on it.

   For now, do what I usually do. It may not please the zealots, but it can validate and it can be accessible:

   • Create your broad page layout using tables.
   • For outline and fill effects on boxes, use div tags and CSS. If you must be compatible with Netscape 4, use some small tables, but don’t nest them; use CSS for borders and fill.
   • Use structural HTML to mark up your body text, and CSS for formatting.
   • For compatibility with older graphical browsers, add the basic elements for text & background colour in your body tag.

   I don’t know why a discussion about using CSS sounds like it’s exclusively about table-less layout. I think that table layouts will stop being used someday, just as many web sites have abandoned compatibility with Netscape 2, for example (by the way, a good CSS design can still work in Netscape 2).

   But using CSS you can harness a lot of power and save a lot of work, while being compatible with web browsers of the past and the future.

  4:04:52 AM    

The best thing CSS has done for me

Tired eyes? If you have a browser that supports user style sheets you can increase readability of the web by about a zillion percent.

1. In your favorite text editor, create a file called user.css. In it type:

   body {line-height:1.62;}

2. Save the file somewhere where it won’t get lost. I put mine at ~/Library/Preferences/user.css (on MacOS X).
3. Tell your web browser to apply this to all pages.

   In MSIE (mac) it’s in Preferences, under Web Browser > Web Content. Click “Use My Stylesheet” and select the file.

Now, thanks to the miracle of typography, every web page will have that breath of extra leading, to make your reading experience more yummy!

If a web page’s designer has thoughtfully already specified leading for the body of a page, this stylesheet will have no effect.

This is the effect of the Cascading in CSS. The user stylesheet will add to any web page’s default stylesheet, but it won’t override it.  3:39:38 AM