W3C home > Mailing lists > Public > www-style@w3.org > September 2007

Re: [Stupid newbie probably OT philosophical musings] Does CSS need a mapping/composition layer?

From: Rikkert Koppes <rikkert@finalist.com>
Date: Wed, 12 Sep 2007 19:41:15 +0200
Message-ID: <46E824BB.6070906@finalist.com>
To: Jay Levitt <lists-wwwstyle@shopwatch.org>
CC: www-style@w3.org

I'd say that your idea looks a lot like the css3 advanced layout module

Rikkert Koppes

Jay Levitt schreef:
>
> After a 6-year hiatus from professional programming, I'm creating my 
> first non-toy web application.  Read all the CSS books, keep up on the 
> lists and the newsgroups, found the bugs and the hacks.  Tried to do a 
> simple thing - create a form to enter a U.S. postal address - and hit 
> a big philosophical brick wall.
>
> I'm coming at page design from a different direction - I spent 12 
> years at AOL working on server-side apps.  Our forms layout engine had 
> some simple primitives: everything belonged to either a horizontal or 
> a vertical group, and every group had a vertical and horizontal 
> alignment.   Labels were special, and you told them where to sit 
> relative to the input field. By nesting groups, you'd create the 
> layout you want.
>
> That's actually not hard to replicate in CSS; I can create divs that 
> go from horizontal to vertical depending on what their class is, and I 
> can create labels that sit on top or to the left depending on their 
> class. And they nest nicely and work in floated column layouts.
>
> But that requires that I specify the class of each div or input field 
> in HTML.  And that violates the separation of presentation and content.
>
> (At AOL, we separated presentation from content by having developers 
> do the basic grouping of content, and hand over the forms to designers 
> who did pixel-perfect positioning for each individual client 
> ("browser") version, country, language, and screen size.  That didn't 
> scale so well either.)
>
> Now, each input field has an ID, as do their surrounding divs.  So I 
> could, in theory, either (a) repeat the "horizontal" or "vertical" CSS 
> properties for each ID, or (b) find every ID on every page in my app 
> that wants to be horizontal and put it all one in big selector.  
> Neither one of these is attractive, DRY or scalable.  And of course 
> either one requires you to create non-semantic grouping DIVs to hang 
> the CSS off of.
>
> To my novice eye, what I want is a layer in between HTML and CSS that 
> says (pseudocode):
>
>   #firstname #lastname {group: horizontal; id: name;}
>   #city #state #zip #country {group: horizontal; id: region;}
>   #name #address1 #address2 #region {group: vertical; }
>
> The HTML deals only with semantics and function, providing the ID of 
> each field; the pseudocode above maps and composes those fields into 
> layout groups; CSS-as-we-know-it specifies the style of each group.
>
> That can't be done today with pure HTML and CSS; JavaScript could turn 
> "group" into a DIV and set its class and ID, but you shouldn't need 
> JavaScript for basic form layout.
>
> I can't imagine I'm the first person to come up with this, but I have 
> no idea what to search on... can anyone point me to someplace this has 
> been discussed to death for CSS3 (whatever that means now)?  I checked 
> out XForms but they don't seem to accomplish this either.
>
> Jay Levitt
>
>
>
>
>
Received on Wednesday, 12 September 2007 17:38:40 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:52 GMT