19

Let it flow, let it flow, let it flow (into CSS regions)

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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 (region-overflow: auto/break).

Useful?

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.

Attribution

"Diving Into CSS Regions" by Umar Hansa on Nettuts+ is a great intro to CSS Regions

The chapter Regions from the Internet Explorer 10 Guide for Developers gives an in-depth explanation of the feature as implemented in (you guessed it) IE10.

The Adobe CSS Regions introduction has a lot of links to cool demos and examples.

To find out what might be possible with this feature later on, you might want to read the CSS Regions Module Level 3 spec.