Automatic container/wrapping

 From my understanding, the purpose of style sheets is to try and 
separate content from presentation.  I've checked some drafts such as 
that for CSS templates and it is looking very promising when/if it is 
completed and implemented by browsers.  Currently, it seems that the 
order of things in a document controls the display order entirely.  
Something that comes first is either on top or left.  For example, in 
phpBB prosilver style, the contents of a post are displayed to the left 
of the user information of that post.  To change this currently would 
require a change to the content (HTML).  But with CSS templates, it 
seems to change this could be a matter of only changing the presentation 
(style sheet), such as changing something like display: "ab"; to 
display: "ba";

Another area that presentation is directly embedded into the content is 
in the form of wrappers to help create a certain look.  But this is 
still for presentation control and not actually content itself:

<body>
<div id="wrap">
<div id="header">...</div>
<div id="navigation">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</div>
</body>

Such a thing may be used to place the all the content centered:

body { background-color: #DDD; }
#wrap { background-color: #FFF; border 2px solid #888; width 750px; 
margin 32px auto; }

If a desire to change the looks later, maybe to put the header and 
navigation together and the content and footer together visually, more 
changes may be needed:

<body>
<div id="wrap1">
<div id="header">...</div>
<div id="navigation">...</div>
</div>
<div id="wrap2">
<div id="content">...</div>
<div id="footer">...</div>
</div>
</body>

#wrap1, #wrap2 { background-color: #FFF; border 2px solid #888; width 
750px; margin 32px auto; }

Sometimes, it may be desired for styling for an individual element to be 
wrapped by some systems.  This is all fine for automatic content 
systems, but for individuals who hand-code HTML, it can be tedious.

I don't know if this idea has any merit, but perhaps a way to 
automatically wrap desired elements in a new container could be useful.  
The idea is that in the CSS, elements can tell that they want to be 
wrapped.  For any element, any child elements that want to be wrapped a 
certain way would transparently behave as if they were wrapped in a 
<div> with the desired style.  Also the wrapping can wrap more than one 
element, but only if they are siblings of each other.  Non-siblings 
would always get their own element to wrap with.

<body>
<div id="header">...</div>
<div id="navigation">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</body>

A simple CSS mockup:

body > #header,
body > #navigation,
body > #content,
body > #footer
{
   autowrap: "wrap";
}

/* Once wrapped, it is no longer "body > #header, but body > .wrap > 
#header */
body > .wrap > #header
{
    styles here
}

/* of course any shared style could simply go in a simpler definition */
#header
{
     autowrap: "wrap";
     styles here
}

/* The wrapper can have its own styles */
body > .wrap
{
    ...
}

/* Even selectors could be applied */
body > .wrap:hover > #header
{
}

The above would simulate the first, with all contents in a single 
wrapper.  To simulate the second, split wrappers:

#header, #nagivation
{
   autowrap: "wrap1";
}
#content, #footer
{
   autowrap: "wrap2";
}

This would be akin to doing:
<div class="wrap1">
<div id="#header">...</div>
<div id="#navigation">...</div>
</div>
<div class="wrap2">
<div id="#content">...</div>
<div id="#footer">...</div>
</div>

Except, since the wrappers only exist to help presentation, they are no 
longer required in the HTML.  Also, individual items could have their 
own private wrapper even if they are siblings:

nav > ul
{
   autowrap: "ulwrapper" limit 1;
}

Doing something like:

<nav>
<ul> ... </ul>
<ul> ... </ul>
<ul> ... </ul>
</nav>

Would behave as if it was this:

<nav>
<div class="ulwrapper"><ul> ... </ul></div>
<div class="ulwrapper"><ul> ... </ul></div>
<div class="ulwrapper"><ul> ... </ul></div>
</nav>

If it were desired to control element type, perhaps this could be done 
something like this:

nav > ul
{
     autowrap: "span.ulwrapper" limit 1;
}

This would behave as if it was wrapped with <span class="ulwrapper"> 
instead of <div class="ulwrapper">, being inline instead of block 
display for one.

Brian Vanderburg II

Received on Sunday, 4 April 2010 17:27:18 UTC