CSS3 Template Layout


Like many developers who had seen the work-in-progress CSS3 Layout specification I was immediately horrified. As one commenter on Reddit said: “Argh. ASCII-art drawing for columns?” which summarizes my initial feeling pretty well.

Now I felt that way until seeing this example from the CSS3 Layout spec document:

  1. "a   .   b   .   c"  /2em
  2. ".   .   .   .   ."  /1em
  3. "d   .   e   .   f"
  4. ".   .   .   .   ."  /1em
  5. "g   .   h   .   i"  /2em
  6. 5em 1em  *  1em 10em

I could immediately determine what the template was trying to do and how the document was going to look. Even if it is kind of crazy at first glance I’m dying for something like this to be implemented. To create an equivalent document using the CSS that we have now – or even Tables – would absolutely futile.

Even the syntax isn’t that bad when you look at it. When examining the example I can see that there are three significant rows of content (two of which are 2em high and one of which will expand to fill the full height) and two spacer rows (each are 1em high). Thinking about how to implement something like this using normal CSS now makes my mind explode in frustration – especially in cross-browser manner.

So while this templating layout is still, very much, in the pipe dream category (no one will even touch it until IE implements it) I think it has a lot of merit and should be strongly examined – especially beyond the initial shock of the new syntax.

Honestly, this is just a goldmine waiting for some enterprising developer to come along and use the syntax to build a solution that’ll work in all current browsers (maybe a server-side, or JavaScript, tool that’ll process the template and inject the right style rules using a grid CSS framework).

Posted: November 10th, 2008


If you particularly enjoy my work, I appreciate donations given with Gittip.

27 Comments (Show Comments)



Comments are closed.
Comments are automatically turned off two weeks after the original post. If you have a question concerning the content of this post, please feel free to contact me.


Secrets of the JavaScript Ninja

Secrets of the JS Ninja

Secret techniques of top JavaScript programmers. Published by Manning.

Ukiyo-e Database and Search

Ukiyo-e.org

Japanese woodblock print database and search engine.


John Resig Twitter Updates

@jeresig

Infrequent, short, updates and links.


via Ad Packs