Responsive Content Using CSS Regions

CSS Regions allow content to flow across multiple areas of the display, called regions.  The beauty of CSS Regions is that you can separate the content from the layout.  And with that comes the ability to create some responsive content very easily.

Update August 29, 2013: 

I have a new post describing Cross-Browser Responsive Content Using CSS Regions.  I describe there how you can do exactly what is described here, but also use the CSS Regions polyfill to get CSS Regions support on many other browser and devices.

The flow-into CSS property can be used to prevent some content from displaying normally, but rather have its display redirected to a named flow:

#source {
   -webkit-flow-into: main-thread;
   flow-into: main-thread;
}

Then we can specify our layout, and tell the layout where to get its content from using the flow-from CSS property:

.region {
   -webkit-flow-from: main-thread;
   flow-from: main-thread;
}

In the case above, all of the content in the element with ID source will actually get rendered into the layout specified by all of the elements of class region.

Let’s take a look at an example.  First, make sure you are viewing this with either a Webkit nightly, Chrome Canary, or an up-to-date Chrome Stable.  Then, if you haven’t already done so, you need to enable CSS regions by navigating to chrome://flags and clicking on “Enable” under Enable experimental Webkit features.  You’ll then need to relaunch the browser.

Check out this Pen!

I tried to keep the example as simple as possible.  Basically, we have a DIV whose ID is source.  That DIV contains all of the text to be displayed.  But, since we have the following in the CSS:

#source {
 -webkit-flow-into: main-thread;
 flow-into: main-thread;
}

All of the text in that DIV gets redirected into the named flow called main-thread and doesn’t display in its original DIV.

We also have several DIVs, all of class region.  In the CSS we have:

.region {
 width: 150px;
 height: 150px;
 float: left;
 margin: 10px 5px;
 -webkit-flow-from: main-thread;
 flow-from: main-thread;
}

All of those region DIVs will get their content from the main-thread named flow.  And, since they are all float: left, the DIVs will automatically relayout as you adjust the width of the window.

Finally, I stuck an image in the middle of it just for the fun of it, to show that your regions can be easily interspersed with other content.

Try that now. Make this window narrower and wider, and you should see the text automatically adjust.

Now think how much work would be involved in getting this simple example working without CSS Regions.

You can find out more about CSS Regions here.

Tagged , , , . Bookmark the permalink.

7 Responses to Responsive Content Using CSS Regions

  1. Pingback: Responsive Content Using CSS Regions | Flippin' Awesome

  2. Pingback: Responsive Content Using CSS Regions - Alan Gre...

  3. Pingback: Responsive Content Using CSS Regions - Alan Greenblatt | WPMagic

  4. Pingback: Design Focus: Neon | Devlounge

  5. Pingback: Tweet Parade (no.34 Aug 2012) - Best Articles of Last Week | gonzoblog

  6. Pingback: Cross-Browser Responsive Content with CSS Regions - Alan Greenblatt

  7. Pingback: 9 Good Articles… | Bojegar Today

Leave a Reply

Your email address will not be published. Required fields are marked *