[css3-regions] Single-region use cases

While the main use cases for regions are for flowing text from one container
to another, I believe there will be uses of named flows with single-region
targets. Redirecting content from a set of elements to a single element
makes some positioning tasks very easy.

Consider an alternate style sheet for the CSS WG specifications. What if you
wanted to show all of the issues at the top - perhaps you're working through
the list and want to see how many are left, or you want to copy just the
issue text to paste somewhere else. You should be able to do this with just
a small amount of CSS without changing the markup:

.issue {
  -webkit-flow-into: allIssues;
}
body::before {
  display: block;
  -webkit-flow-from: allIssues;
}

The set of people who might benefit from this particular example might be
small. But hopefully it illustrates how easily you can rearrange content
display order with named flows, and how a single-region flow could be
desirable. The styling above seems much more straightforward to me than some
of the repositioning schemes I've seen people try. It's a limited kind of
DOM manipulation (that does not actually change the DOM) you can do in CSS
without resorting to JavaScript.

Of course, regions do not quite work this way yet. At the moment if you want
to use this trick and not overlap content you need to specify a height and
width on the pseudo-element. If this idea is something we should pursue,
then width:auto and height:auto need to be able to calculate the correct
size for a single region that will contain the entire flow. And this use
case would also benefit from sibling pseudo-elements, if you want to
position your flow in-between two elements as opposed to at the end or
beginning of either.

Thanks,

Alan

Received on Friday, 13 January 2012 03:03:41 UTC