CSS Regions, and why you’ll be using them before you know it

[This article is also available in Russian]

CSS Regions is a W3C working draft that allows you to flow text between different areas of a page. The simplest use-case might be column layouts, where each column is an explicit region, but the powerful part is that the regions don’t have any constraints on their position or size. This means that columns barely scratch the surface of the full power of regions, as evidenced by having their very own w3c spec.

The quickest way to see how powerful regions are is with a window-resizing example. This example contains a single div of content that flows across four regions. The re-flow between regions occurs as the window resizes, ensuring that each word of the content seamlessly renders in its correct region. This screen capture shows the finished result:

To try it out yourself on codepen, follow along with the following three sections that explain:

  1. Where/When can we use CSS regions (as of September 2013)
  2. How to use CSS regions
  3. Why we’re going to want to use CSS regions in the future

By the end of this article I hope you’ll be busting out your experimental browser and hacking some awesome regions into your own site!

Where/When can I use CSS Regions?

Unless you’re running a pretty bleeding edge browser your might not see the nice regions when browsing our example. At first glance, the caniuse page for CSS regions seems to suggest you need a copy of IE10+, or a beta of Safari and that’s your lot. But the real story is a little more subtle:

  • IE10+ works but requires content to come from an iframe. (Let’s ignore this for now).
  • Safari 6.1 (currently beta) just works, using the -webkit- prefix
  • MobileSafari in iOS7 just works, using the -webkit- prefix
  • Google Chrome Canary (or version 29+) works once “web platform experimental features” are enabled, also using the -webkit prefix
  • Opera only works if you’re running a webkit-based version, with the -webkit prefix
  • Firefox has no support right now, favoring the CSS Overflow draft for some of the use cases that regions solve

For curious developers, you can get a fine-grained view on rendering engine support: the CSS working group maintains a test suite results page showing exactly what works under the hood in the main rendering engines.

How to use CSS regions

Regions require two simple concepts: a block of content where the content will flow-from, and one or more blocks that the content will flow-into. The following DOM structure reflects this:

<div class="content">Lorem ipsum etc... All your real content here</div>
<div class="myregion" id="region1"></div>
<div class="myregion" id="region2"></div>
<div class="myregion" id="region3"></div>

The following CSS turns the myregion divs into regions. Combined with a float and a width restriction, the lorem ipsum content will flow into three columns:

.content {
  flow-into: myipsum;
  -webkit-flow-into: myipsum;
}

.myregion {
  flow-from: myipsum;
  -webkit-flow-from: myipsum;

  float: left;
  width: 100px;
}

In the above example, myipsum is the name we gave to this particular region setup. Separate names allows us to use regions to layout several pieces of content.

We’re not restricted in the stylings and structure of our regions. We can add another large region below the columns, or another with absolute positioning. We can add many more regions if we wanted extra columns. We could lay out the regions with a flexible box if we want form a fluid layout with them. And so on: the possibilities are extensive.

Take a look at the interactive example on codepen I put together to get a flavor of how content flows between regions.

Why we’re going to use CSS regions in the future

The above only scratches the surface of what’s possible with regions. We could create more columns, or we could use transforms, transitions and animations to create a moving carousel full of rotating content that expands and re-flows as the window resizes.

We can create responsive layouts that adapt to phone, tablet or desktop layouts, and adapt our fluid layouts even further for users with super-massive displays instead of locking the width or expanding to an absurd width.

Once browser support cements further, things like Book.js give us a hint of things to come. It’s an experimental Javascript library that takes your semantic mark-up and a simple configuration to make web pages look like book pages. It uses css regions under the hood. The source gives full usage instructions.

Finally, with MobileSafari getting in on the action (as announced in the iOS7 WWDC keynote), combining gestures on touch devices with regions gives us the capabilities to build really interesting, interactive magazine-style experiences on the web.

Next steps

Get yourself a browser that supports regions – either download Google Chrome Canary and set “Enable experimental Web Platform features” in the “about:flags” page, get hold of IE10+, or get a beta from the Safari Dev Center.

Try out the codepen above, fork it, hack it, extend it, then post your creations in the comments below.

Skim or read the W3C’s Regions draft, it’s full of interesting ideas and capabilities to inspire your next project.

Whatever you do with regions, have fun!

to hear future CSS tips, front-end dev tools, hints, tips, and hacks.

This entry was posted in CSS. Bookmark the permalink.

4 Responses to CSS Regions, and why you’ll be using them before you know it

  1. Hi Lee,

    Thanks for this in-depth coverage of CSS Regions! There is a mix-up in the code sample on ‘How to use CSS Regions’: the .content should use ‘flow-into’ while the .myregion needs to use ‘flow-from’.

    The use cases you described are perfectly valid. Additionally, perhaps you’ll find interesting the solution for adaptive UI with CSS Regions: http://blogs.adobe.com/webplatform/2013/04/08/adaptive-web-app-ui-with-css-regions/

    Looking forward to see any other experiments you do with CSS Regions & others.

  2. Pingback: Combining CSS regions with transforms and animations | fonicmonkey

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s