2005/12/08

CSS for dummies

I’ve only a little time, so I’ll begin by including verbatim the couple of notes I jotted down when these thoughts came to mind. Yes, I am embarrassed it’s taken me so long to write more in here.

  • What’s the deal with all this CSS stuff?
  • How much more powerful is it than LaTeX or ConTeXt?
  • Why is its power so surprising to people?
  • How on earth did a committee design a language that no-one has full master of?
  • Do browser quirks make it the most annoying thing in the world?
  • Is 2006 the year that browser quirks are no longer a problem?

Some of those questions will be inflammatory, but I assure you some of them aren’t as daft as they sound without context. So, this was all inspired by an article I read, linked by John Gruber, on re-arrangeable blocks in CSS that the author terms “the One True Layout”.

Now, don’t get me wrong with the tone of the first question I posed above. I’m incredibly impressed with one of the examples, “Nest Rounded Corners”. When you consider that the page uses logical markup, that’s one nice feat of document engineering, if you’ll pardon the expression.

But when I tried out CSS a year or so ago, this example wouldn’t have surprised me. I’m impressed that browser support is now good enough that this kind of thing can be done, but I’m confused about the reaction from the public on the technique. Is it amazing because of the browser support or because of the CSS?

I guess because it’s such a new field, things like this push back the envelope of what’s possible simply because everything is new and the potential of CSS has not yet been realised.

One of the things I don’t understand is how the W3C can invent CSS without having a reference implementation, and without anyone (seemingly) having any idea of the upper limits of its success. I suppose the same thing is true of a programming language, though, so I probably shouldn’t be bothered by it.

Another thing I don’t understand is that although they claim to be writing logical markup, at these extremes the layout is fairly hard-wired into the XHTML. Check out the following source snippet:

<div id="wrapper">
<div id="group_1-8">
<div id="group_1-6">
<div id="group_1-5">
<div id="group_1-3">
<div id="block_1">
    ...
<div class="verticalalign"> ... </div>
</div>
<div id="block_2">
    ...
<div class="verticalalign"> ... </div>
</div>
<div id="block_3">
    ...
<div class="verticalalign"> ... </div>
</div>
</div><!-- close div#group_1-3 -->
<div id="group_4-5">
<div id="block_4">
    ...

I admit that it’s orders of magnitude better than anything the web has seen previously. And it might look better with real world text and decent indenting. But the fact that everything has to be nested and the CSS values have to be hand-calculated makes the whole thing a lot more cumbersome than I would expect given the ravings of the community about the separation of semantic and presentational markup.

I don’t want to thing about the coding details, but it would be possible in some TeX-based format to write something like this:

\begin{blocks}
  \begin{block1}
    ...
    \snap{...}
  \end{block1}
  \begin{block2}
    ...
    \snap{...}
  \end{block2}
  \begin{block3}
    ...
    \snap{...}
  \end{block3}
\end{blocks}

But again, the layout would be hard-coded and actually getting to this stage in the implementation would be a nightmare (well, for me at least :)). It would have the advantage, however, that the source makes absolutely no reference to the layout of the final document, which isn’t exactly the case in the XHTML. In comparison with the implementation, however, it is a comparative piece of cake to do the layout in CSS.

Anyway, the whole thing’s getting to the stage where I think people have been dreaming about, and it does seem like Safari and FireFox (and Opera) are now emerging as very very powerful document renderers. With IE7 beta due out next year soon-ish, which had better have some measure of parity with those aforementioned, I have high hopes that 2006 will be the year that CSS techniques become mainstream, after 2005’s blossoming.