Tuesday, November 11th, 2008

CSS3 ASCII Layouts, Element Transversals, and Gotchas

Category: CSS, jQuery

John Resig has been a busy guy posting today not once but thrice! They all interesting too.

I really enjoyed the CSS3 Template Layout post that reminds us of the CSS 3 advanced layout that allows you to use ASCII to define it:

  1. <style type="text/css">
  2.   body {
  3.     height: 100%;
  4.     display: "a   .   b   .   c"  /2em
  5.              ".   .   .   .   ."  /1em
  6.              "d   .   e   .   f"
  7.              ".   .   .   .   ."  /1em
  8.              "g   .   h   .   i"  /2em
  9.              5em 1em  *  1em 10em}
  10.   #logo {position: a}
  11.   #motto {position: b}
  12.   #date {position: c}
  13.   #main {position: e}
  14.   #adv {position: f}
  15.   #copy {position: g}
  16.   #about {position: h}
  17. </style>

John has changed his stance from “oh man that is ugly” to “it has merit”. We sure do need help with layout. Can’t we have JGoodies give us a decent layout manager for JavaScript?

John also discussed:

  • The new Element Traversal API and how his jQuery plugin uses the cleaner API and gives promising speed improvements: “With this addition .siblings() is 84% faster and .children() is 35% faster.”
  • In Deadly Expandos he discusses the old bug that has the id to method madness of DOM0 stepping on functions to break your apps.

Posted by Dion Almaer at 12:43 am

3.4 rating from 26 votes


Comments feed TrackBack URI

CSS’s power was that its a easy language to learn, this will totally fuck that up.

Comment by V1 — November 11, 2008

Easy to learn how to do layouts in CSS??? I dont think so.. However this is a very strange way of doing things!

Comment by sc44 — November 11, 2008

Are you kidding? CSS3 Advanced Layout Module is going to be one of the best things to have ever happened to layout for the web. As Dion rightly points out in this post, help is needed with CSS layout and this appears to be a very elegant solution to the problem. We just need to nail down what the syntax should be.

Comment by theallan — November 11, 2008

I must say i dislike the inconsistency:

display:”arbitrary big ass string that an IDE probably won’t touch or suggest”
I won’t deny the usefulness though, we’ll just have to wait and see

Comment by TNO — November 11, 2008

For me, CSS has a tipping point where its complexity becomes worse than table-based layout. Especially in multi-column liquid layouts. I’m cruising along just fine. “Yes, this is so sweet!” Then. “Hmm. Oh yeah, that’ll work.” Then, “Arrgh. What’s going on?” Then, “Hell with it. All the browsers and I will agree on how to interpret a table. I don’t know what I’m doing any more.”

Comment by Nosredna — November 11, 2008

Lets just forget the whole thing and just render everything in , it’ll be OpenGL based soon anyway. Just reinvent the DOM you want. and if you can’t get it to look quite right…hell just embed a screenshot and make it a clickable region.
Just kidding
maybe… <.<

Comment by TNO — November 11, 2008

Ajaxian Fail….
Correction: “render everything in CANVAS”

Comment by TNO — November 11, 2008

I wouldn’t mind a REALLY good tool that lets me layout a page and gives me a really clean css file. The problem with existing tools (as far as I’ve looked), is they don’t work for liquid layouts. I suppose what I want to do is show the tool the layout at minimum width and maximum width. Then it can figure out which columns stay the same widths and which ones shrink to accommodate.

Comment by Nosredna — November 11, 2008

This seems pretty powerful and pretty simple once you spend 10 minutes wrapping your mind around it.

Comment by jamienk — November 11, 2008

I don’t like it. How do you set this from code? I’ve never seen any desktop development framework that used ASCII art to store these sorts of layouts. Somehow they all find ways to make the settings sane when serialized to file. Whoever proposed this would do well to take some inspiration from the desktop dev frameworks.

Comment by Joeri — November 12, 2008

I guess this is supposed to be intuitive as well?
body { display: “a@@”
“@@d” }
img { width: 100%; fit: meet; fit-position: 50% 50% }
img#a { position: a }
img#b { position: b }
img#c { position: c }
img#d { position: d }

Comment by TNO — November 12, 2008

This reminds me of Perl formats. I don’t like Perl formats.

Comment by BenRifkah — November 12, 2008

I really don’t think it’s the difficult to understand. I haven’t even really looked at the spec and everything shown makes perfect sense. Like JR said though, won’t do us much good until IE supports it…even then we’ll have IE7 to gripe over =/

Comment by restlessdesign — April 29, 2009

Leave a comment

You must be logged in to post a comment.