The latest stable release for Chrome (version 15) brings experimental support for a new feature, CSS Regions. What this does is take content from a source, and flow that content into a target – or, more importantly, multiple targets. This allows layouts which are more flexible than are currently possible.

This is still a very experimental feature but it’s worth beginning to investigate, so in this article I’m going to very quickly walk through the syntax and discuss the current level of implementation.

Update, 15/11/11: I realised that I overlooked Microsoft’s implementation of CSS Regions, so I’ve updated this post to correct that.

Update, 17/05/12: Chrome 19 (and possibly other versions) require you to opt-in to CSS Regions; type about:flags into the URL bar and enable CSS Regions.

CSS Regions in Chrome

If you’re using at least version 15 of Chrome, the example below should show you a paragraph of content split between three boxes; if you’re using another browser, you should see a paragraph of text followed by three empty boxes (see this example on JSFiddle if the iframe’s not working, and resize the browser to see the flow in action).

The syntax itself is quite straightforward. We’ll start with the source element – this must be included in your markup, but won’t show up in the document. CSS is used to set the source, but the property is currently in a state of flux: in Chrome 15 you must use the -webkit-flow property, and in Chrome 16, the newly revised -webkit-flow-into property. In both cases the value is a unique identifier of your own choice – note, however, that in the first property I’ve quoted the identifier as it’s actually a string:

#source {
  -webkit-flow: 'foo';
  -webkit-flow-into: foo;
}

You can then distribute that content across as many target elements as you like. The content will flow through those elements in DOM order, with overflow from the first element appearing in the second, overflow from there appearing in the third, and so on. Once again, how you do this has changed: in Chrome 15 you use the content property with the -webkit-from-flow() function as a value, and in Chrome 16 you use the -webkit-flow-from property – in both cases, referring to the identifier you created (formatted as a string for Chrome 15):

.target1, .target2 {
  content: -webkit-from-flow('foo');
  -webkit-flow-from: foo;
}

Just to muddy the waters even further, the build of Chrome I’m currently using (16.0.912.21) is halfway through the transition between the old and new syntaxes, and so although I expect this to change before 16 becomes stable, currently only works with this syntax:

#source { -webkit-flow-into: foo; }
.target1, .target2 { content: -webkit-from-flow('foo'); }

Anyway, the flowed content is effectively invisible to the target elements, so by default they will have neither height nor width; that being the case, you need to assign some dimensions to them. NB: Not being aware of the flowed content also means min-height and min-width will behave identically to height and width (respectively).

.target1, .target2 { height: 100px; width: 100%; }

Having to set explicit dimensions does somewhat limit the possibilities of CSS Regions; they were created to support print-influenced semi-fixed layouts aimed at tablets or ebook readers, so their usefulness on the web at large is perhaps restricted (certainly when viewed against some of the more flexible layout methods that are being planned).

A quick note about styling the flowed content: long term there will be a new rule, @region, which will allow you to style the content for each target, for example:

@region .target1 { color: #F00; }

At the current level of implementation, however, you have to apply the rules to the source, not to the targets; that is to say, you can only style the box of the target elements, not the content within them.

CSS Regions in IE10

The preview release of IE10 also has support for CSS Regions, although their implementation has one important difference, in that the source must be contained in an iframe:

<iframe id="source" content="source.html"></iframe>

This is then used in the same way as the standard dictates:

#source { -ms-flow-into: foo; }
.target1, .target2 { -ms-flow-from: foo; }

You can read more in the IE10 Developer Guide. I’d imagine this implementation will be updated to fully meet the spec before IE10 is officially released. I don’t have access to a copy of the preview browser at the moment so I can’t test if this works, but will update this post when I get the opportunity.