I have ranted on in the past about how great XHTML and CSS are. You can find similar diatribes all over the many sites devoted to bleeding edge web design. (I’ll link to some when I can be bothered.) However, I’ve come to realise that my confidence is slightly misplaced.
I still think XHTML is okay, and I still think the overall concept of divorcing content from design is absolutely fantastic. However, the current state of CSS makes this completely impossible, in my opinion, and it doesn’t show any real signs of getting any better.
Now, I’m not talking about the current disparity between the standards and the browser implementations. That’s just a temporary problem, and while it does cause some huge headaches at the moment, it will go away.
What I’m talking about is the fact that, while CSS is great for specifying font sizes, colours, borders and things like that, it’s absolutely inadequate for expressing the complete design of any reasonably modern webpage. Some basic design functionality just seems to have been completely ignored, and draft standards for future versions of CSS don’t seem to be addressing these failings: they’re more concerned with adding far-fetched features like the azimuthal angle the computer synthesised speaker of a piece of text should appear to come from.
Let’s say, for example, that I’d like to create a basic three column layout that resizes with the browser. Say, 15%, 75%, 10%. A pretty simple task, you’d think, right?
Can I do that in CSS?
Well, okay, you probably can, just about, but it would probably involve creating two boxes of widths 15% and 10%, floating them to the left and right respectively. But then if your middle column is longer than your outer columns, it’ll spread out underneath them.
And anyway, I shouldn’t have to fiddle with this crap. There should be a simple syntax that can let me specify three columns, nestling together, with widths of 15%, 75%, 10%. But there isn’t.
Another big problem: If I’m separating design from content, then logically my HTML document should not include any references to images that simply form part of the design, right? The three graphics that make up the ‘fmc’ bar at the top of this page, for example.
I’ve managed this on this website – check the source. But I’ve done it through a huge fudge. I’ve specified background images in the CSS. But then these won’t display unless there’s some corresponding content in the HTML. So I’ve had to include a little bit of text that is set to size 0, and have the background image display behind that. It works fine in some browsers, and looks pants in others.
But that’s besides the point. I shouldn’t have to do this. CSS should include a natural way to specify design element images and place them where I want them. But it doesn’t.
Separating design from content is a great idea. But with the current languages, it’s just not possible to do it with anything more complicated than a very simple layout. If I’m just missing something really obvious in CSS, then I’d love to hear about it. But plenty of other people have expressed similar confusion about how to achieve similar basic design goals using CSS, and unfortunately they generally feel that they’re at fault for not understanding CSS, rather than CSS itself being at fault.
We either need a dedicated language for page layout, and leave CSS to handle just styles, or we need to extend CSS to include intuitive, useful layout language features. The situation at the moment is just a mess.