[css-regions][css-overflow] escaping the sibling trap - use case 3

This case springs directly from one of the major differences between
overflow:fragments and CSS Regions. Regions can be made out of any box,
but overflow:fragments boxes must be siblings, as the cloned boxes all
share the same parent.

Layout is not flat. Expressing a layout almost always involves grouping in
order to position and size related boxes. Grouping can absolutely
necessary or merely for convenience. The clearest, most maintainable
expression of a design often requires grouping just to make the best sense
of the complex relationship between boxes. Even in the glorious future of
grid we admit that grouping is sometimes required with subgrids and nested
grids.

So while some designs that flow content from one box to another can be
expressed as a flat list of sibling boxes, there are other designs where
the boxes need to be grouped in different parents. A design expressed with
overflow:fragments styling can serve the former and lacks the flexibility
to address the latter. But pairing overflow:fragments with named flows
gives us that flexibility.

The puzzle of how to link to boxes from different parents is what led to
the design of named flows. So if an overflow:fragments design outgrows its
flat sibling structure, the next step can be to assign the
overflow:fragments content to a named flow and use the fragment boxes as a
region chain (as in use case 2, or the code below). Then other boxes in
other layout groups can be added to the region chain.

There could be more than one overflow:fragments element that could be
linked via a named flow as well. The styling below could create a flow
that ran through boxes in separate parents where all of the boxes in the
region chain are made from content elements. And in browsers that lack
regions and/or overflow:fragments, the layout still has a semblance of
fragmentation by splitting the content between the elements.

#frag-element-1 {
	overflow:fragments;
	flow-into: combined-flow content;
	flow-from: combined-flow;
}

#frag-element-2 {
	overflow:fragments;
	flow-into: combined-flow content;
	flow-from: combined-flow;
}

Thanks,

Alan

Received on Tuesday, 8 October 2013 23:49:04 UTC