Tuesday, February 19, 2002
I've been using CSS (Cascading Style Sheets) for ages on this and other sites, to set colors and fonts. More recently, I've been using it to set alignments, borders, and backgrounds. All my CSS usage has been with appearance effect, not with positioning.
Well, after doing some reading particularly at A List Apart, I've been trying to figure out what would need to be done to stop using tables for layout, and do it all in CSS. The advantanges are huge:
- Faster page downloads because of less text
- Faster page renderings because of no (or few) tables
- Accessible to speech and braille systems, as well as to handhelds
- Single-point-of-access changes to modify the site appearance and layout
- Control over order of loading
Also on ALA's site, I found a great article that explains how I've always thought about the web (note: I'm not Daoist!). The key is that the web site's design needs to be able to flow into whatever device it is asked to, as opposed to looking exactly like I want everywhere.
However, I also believe strongly about not breaking old browsers. This is a key point in the CSS debate raging across serveral of my regular reading sites. Tables work well for layout, and degrade fine where they're not supported. So, I use tables to layout my content, and CSS to spruce it up for those browsers that support it.
CSS also lays out well, howbeit not as intuitively as tables. If you're a fixed-width type person, CSS boxes will work just fine for you. Things get a lot more complicated when creating a page that flows well into whatever container window it's placed into. This is also where real problems crop up. Turns out that browsers are not behaving well when they hit CSS they don't support, particularly with IE 5, a really common browser at the moment. So there are pages of explanations and workarounds and fixes to get things to work as they ought with buggy version 4 and 5 browsers. Version 6 browsers seem to finally get it right, apparently.
I converted my profile page to CSS layout. It's a simple page, so you can't tell very much, but if you check the source, it's really cool to see that the main content text comes first, then the menu, then the header - not at all the way it appears on the screen! That's cool. The DIVs are absolute positioned, because that's the way DreamWeaver implements layers, but I'd like to get the menu to pop down below the text when the windows is too narrow.
The trouble is that it doesn't look the same in Netscape 6.1, let alone any of the v4 or 5 browsers, which I haven't even tried yet. I think I'll just practice, learn how to do this, but wait until v6 browsers are the norm before converting to CSS for layout.1 Comment