Tuesday, November 11th, 2008
CSS3 ASCII Layouts, Element Transversals, and Gotchas
<p>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:
CSS:
-
-
<style type="text/css">
-
body {
-
height: 100%;
-
display: "a . b . c" /2em
-
". . . . ." /1em
-
"d . e . f"
-
". . . . ." /1em
-
"g . h . i" /2em
-
5em 1em * 1em 10em}
-
#logo {position: a}
-
#motto {position: b}
-
#date {position: c}
-
#main {position: e}
-
#adv {position: f}
-
#copy {position: g}
-
#about {position: h}
-
</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.
Related Content:
3.5 rating from 21 votes
CSS’s power was that its a easy language to learn, this will totally fuck that up.
Easy to learn how to do layouts in CSS??? I dont think so.. However this is a very strange way of doing things!
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.
I must say i dislike the inconsistency:
.
display:inline;
display:block;
…
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
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.”
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… <.<
Ajaxian Fail….
Correction: “render everything in CANVAS”
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.
This seems pretty powerful and pretty simple once you spend 10 minutes wrapping your mind around it.
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.
I guess this is supposed to be intuitive as well?
.
body { display: “a@@”
“@@@”
“@@b”
“@@@”
“c@@”
“@@@”
“@@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 }
.
craziness…
This reminds me of Perl formats. I don’t like Perl formats.
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 =/