Wouldn't it be great to have our content in multiple containers? How about putting it all over an image background? And wouldn't it be neat if we could have the content flow there, without us having to mark it up that way? Not long ago, this was impossible. But now that we have CSS Regions, we can make content flow from one container into the next — and we can handle these containers like regular DOM objects. This may all sound very confusing, but you'll know what we mean by the end of this article.
Demonstrate this great idea of yours, then
How does it work?
We created a
<div class="content"> (or, in the case of IE10, an iframe - but more on that later) which contains all
our content. We also created some empty "region"
<div class="region"> elements. These regions are the elements we
will fill with whatever is in the content div. This is done by setting
flow-into: myregion on the content div, and
flow-from: myregion on the region div.
Now we've got the basics firing on all cylinders, we can style our region divs as we see fit. You'll notice that if you add content to the content div (or the iframe), the content flows through all the region boxes.
In IE10, that's about as far as this feature will take you feature (still quite awesome though, right?). The spec, as
implemented in Webkit Nightlies and Chrome Canary, has a lot more to offer though. We can control how the elements
should break across regions (
break-before/after/inside: region/avoid-region), how text should be styled within a
specific region (with the
@region rule), and how the region should overflow (
This powerhouse of a feature allows us to easily build modern designs and make them highly flexible at the same time. The uses are virtually endless, so we won't even attempt to list them. So yeah, very useful indeed.
Great, but can I use it today?
We hate to break it to you, but unfortunately you can't. The implementation that comes closest to the spec is the one in Chrome Canary, but even in that browser you have to enable the "Experimental WebKit Features" in about:flags. The IE10 version is slightly crippled as it only works with iframes. In conclusion, we think this would an awesome feature, but for now we have to wait until gains wider support (browser vendors, this is your cue!).
Show me the source!
Feel free to look around the differente source files we used for this example.