CSS3

Mon, 05 Nov 2007

I'm not much of a visual design person, but often I'll have to make a webpage for something. They are never pretty, but I like to make them pleasant to use. One of the most common ways of setting out a website is to have a heading at the top, a narrow column on the left with navigation stuff, a narrow column on the right with information and random stuff and a big area in the middle for the main content. Then at the bottom, there is a footer with boring copyright stuff or something like that (nearly like this site, but I don't have a right hand column).

Back in the day, this was done by making a table, and you would either make it 3x3, with the header and footer rows being told to span, or with a header, then a table with 3 columns and then a footer. Then along came the semantic web people, who said that tables are for tabular stuff (fair enough), and using tables for layout is bad, and instead you should separate your content from your presentation. The magic bullet to do this was CSS, so you write html which says what you mean, and then you write CSS which says how to say it.

I think this was a good idea, but executed poorly. The evidence I give for this, is the three column layout page, which gives over 50 different examples of how to do a page with three columns. Every time I have wanted to do something like this, I haven't been able to get it "just right" without reading one of these guides, and I never quite understand why what I did worked. Check out the holy grail for what I mean, and read the CSS for the middle column, in particular the line: voice-family: "\"}\""; - this is the property for saying what voice to read the text in (e.g. male or female, or something more specific), and here it is being used to do some dodgy things to trick bad browsers into drawing your page correctly.

This is not a rant about the bad browsers either, there are plenty of these already. But, if the designers of CSS had looked at what sort of layouts were common, and designed their model to accommodate these layouts easily, I don't think we would have to be resorting to tricks like the thing above.

At this stage, I'm not sure whether to be happy or sad. The good news is that the current draft of CSS3 has support for doing layouts in a way so simple to understand that I can do it, you basically "draw" a rectangle using letters, and each letter corresponds to an area where stuff can go:

aaa
bcd
eee

And there we have the site layout, with "a" being the header, "b", being the left column, "c" being the centre column etc. (It probably needs to be a tiny bit more complicated than that, so that it knows how wide the things should be, but this would just be a matter of saying: "make the left column 20% of the page width, the right column 20%, and the centre column whatever is left over). This method makes so much more sense than the CSS2 method (which always seems to involve messing with margin widths, telling things to float, changing the positioning mode, repeating numbers in both the margin sizes and coordinates, trying to work out how to convince a column to be the same height as another, and once it is done you don't want to touch it).

The bad news is that I don't think any browsers are close to implementing the CSS3 needed for this to work. And because there is this standard that is known about, and it will fix all the problems, no one seems to be doing anything pragmatic to get something that works nicely now.

But the real reason I wrote this was because I had a category without anything in it, there are two more categories that haven't had any love, so maybe soon they will get a run.

Name & email are optional. Email will not be obfuscated.
HTML tags will be removed except hyperlinks.
 

About

I'm a nerd living in Sydney. This is a place where I can write stuff about my interests and not care that no one else is reading.

I like music, maths, programming, pretty pictures, filters and other good things.

(more info)

It should be fairly obvious that this isn't connected to my employer at all.

Email me (not a catchpa)

Email policy

Subscribe

RSS Feed RSS

Get an aggregator

Liferea (Linux)

Vienna (OSX)

Feedreader (Windows)

Google Reader (Web based)

I've only used Liferea, so I can't vouch for the other ones.

About this site

This site runs a (modified) version of blosxom.

The host is GeekISP, and they seem to do an excellent job.