Re: Rendering order without positioning

liorean wrote:
 >
 > Something I feel missing from CSS is that there is no way to swap the
 > positions of content without using positioning, and positioning is
 > limited in that it removes the elements from their natural places in the
 > normal document flow. I would like to propose a property that allows for
 > changing the rendering order within the normal document flow.
 >
 > 'rendering-order'
 >    Value:      <integer> | <integer> [relative | absolute] | auto
 >    Initial:      auto
 >    Applies to:      all elements
 >    Inherited:      no
 >    Percentages:      N/A
 >    Media:      all
 >    Computed value:      <positiveinteger> absolute
 >

This is only a quick type up; i'll add more to it later.

I'd been looking into a similiar extension to css for this; but I'd been 
contemplating float-index: (behaving much like z-index). The Browser would sort 
any floated element in the same container according to this value.
Also, multiple elements can have the same order, if they are set to different 
float: values. So I could have {float: left; float-index:1;} & {float: right; 
float-index:1;}
If the attribute was missing, the flow would still be defined by document 
(source) order.

  'float-index'
     Value:      <integer> | auto
     Initial:      auto
     Applies to:      floated elements
     Inherited:      no
     Percentages:      N/A
     Media:      all

As for a use case; I have a website that has numerous sections that I would like 
to rearrange via css. Either have them all on the left, or in two columns either 
side of the content.
Encapsulating the group of elements I want to position would cause a problem - 
these sections aren't related, so shouldn't be defined like that in the data.
The content of this website is dynamic, the size of each section is not 
specifically known, and it shouldn't be fixed to specific heights, or have 
overflow: hidden applied.

source
<body>
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<p class="maincontent">....</p>
</body>

style 1
.d1, .d2 { float: left; }
.d3, .d4 { float: right;}

[--1--] |.........| [--3--]
[--2--] |.........| [--4--]
         |.........|

style 2
.d1, .d2, .d4 { float: left; }
.d2 { float-index: 1; }
.d4 { float-index: 2; }
.d1 { float-index: 3; }
.d3 { display: none; }
[--2--] |.................|
[--4--] |.................|
[--1--] |.................|
         |.................|

or style 3
.d3 { float: left; float-index: 1; }
.d2 { clear: both; float: right; }
.maincontent { float: left; clear: left; }
[-----------3-------------]
|.................| [--2--]
|.................|


This can be done via client javascript, and thats the way it's going to be done; 
but I think that the css spec should gain a feature like this, css is for 
styling, it should be able to ignore source order. Because what is the source, 
if not data to flesh out the style ?

Cheers,
John

Received on Tuesday, 25 May 2004 07:24:03 UTC