Andi Smith

CSS Regions

Currently if you have a page where content is separated by a drastic change in layout you will need to include part of your content inside one element, and the other part inside another element. If you're using a CMS, this means you need to have two content fields for what is essentially related content.

CSS Columns already offers functionality to separate content in to columns, but CSS Regions provide greater control and flexibility of content on your page by allowing content to flow through the page structure, whatever that structure is.

CSS Regions are defined areas of the page where content can flow. If the content is too large for one region, it will continue to flow in to the next region. If the page is resized or the text size is increased, the page will automatically reflow through the regions. The following diagram shows a couple of simple examples of where regions could be useful:

Examples of possible uses for CSS Regions

With CSS Regions, we need to specify:

  • Our content source element(s).
  • The elements of our page we wish to populate (our regions).

Content Source

The element that contains your content source is given the CSS property 'flow- into', along with the vendor prefix alternatives.

The value of this property is called a "named flow" and will need to match the value we specify for our target elements later. Most alphanumeric values are allowed, however the named flow cannot begin with a number, nor can the values ‘none’, ‘inherit’, ‘default’, ‘auto’ and ‘initial’ be used. In the example below, we give our named flow "myFlow".

<div id="source">
  <h1>CSS Regions</h1>
  <p>Currently if you have a page where content is separated by...</p>
</div>
#source {
  -moz-flow-into: myFlow;
  -ms-flow-into: myFlow;
  -o-flow-into: myFlow;
  -webkit-flow-into: myFlow;
  flow-into: myFlow;
}

It is possible to have multiple sources, simply by assigning the 'flow-into' property to multiple elements. The content will be sourced in the order it appears in the DOM (also known as the document order).

Because we are telling this content to appear elsewhere, this source element will not visibly appear on the page, although it will remain in the DOM.

Regions

Our regions are the block elements we wish to display the content in. Regions need to be given the property 'flow-from' with the value of the "named flow" we specified in the flow-into declaration, along with the vendor prefix alternatives.

.region {
    -moz-flow-from: myFlow;
    -ms-flow-from: myFlow;
    -o-flow-from: myFlow;
    -webkit-flow-from: myFlow;
    flow-from: myFlow;
}

There can be one or more target regions, with the source content appearing in and flowing through each element in the order it appears in the DOM. If you look at the DOM, you will see each of these regions remains unpopulated.

Specifying the flow for each region works in the same way as applying any other CSS rule. For example, you could identify all of your regions by using a shared classname (as in the example above), or you could list them individually using IDs.

Because the DOM for these regions remains untouched, there are a couple of other challenges. Firstly, a width and height needs to be defined for each region as by default it believes the element is empty. Secondly, selector rules to apply styles or access the DOM using JavaScript either need to be applied to the source selector or need to use the @region rule. For example, you can modify all of the named flows paragraphs text color to red using:

#source p {
  color:red;
}

In the future you will be able to use the @region rule:

@region .region {
  p {
    color:red;
  }
}

Using @region we can specify a different selector to target a single region. For example, if we wanted the first region to show the text with a different font weight or color, we could assign an ID to the HTML of our region and then use it as a selector here.

Overflows

The region-overflow property will allow us to control what happens at the end of the last region. Using 'auto' (as shown in the following example) will allow content to continue to flow outside of the region. Depending on the overflow property used, the content may flow outside of the region (overflow:auto), or it may be truncated possibly cutting off the bottom half of a line (overflow:hidden).

.region {
  overflow:auto;
  region-overflow:auto;
}

Using break (as shown in the following example) will stop the content from overflowing when it reaches the end of the last region as if it were flowing to another region, regardless of the overflow settings applied to the element.

.region {
  region-overflow:break;
}

If you are worried that your content does not fit in to the regions provided, you will eventually be able to use JavaScript to determine whether your content is overflowing. Please note, no browser has yet implemented getFlowByName, and when they do it will use vendor prefixes; so the following code is just theory:

if (document.getFlowByName) {
  var flow = document.getFlowByName('myFlow');
  if (flow.overflow) { // true if the content is overflowing
    var container = document.getElementById('container');
    var newRegion = document.createElement('div');

    newRegion.classList.add('content');
    container.appendChild(newRegion);

    // or in jQuery:
    // $('#container').append('
'); } }

Browser Support

Now the fun part. At the time of writing, only two browsers support CSS Regions - Chrome and Internet Explorer 10. They don't support all the features discussed here. And they support them differently.

Firstly, the browsers only support flow-into and flow-from. Currently there is no implementation of @region or region overflows.

Chrome will allow you to specify any element as the source for your content providing the content exists on load, while Internet Explorer 10 currently only allows the source content to be loaded from an iframe… which currently means the two implementations are incompatible with one another.

There is currently no support in Firefox or Opera, but you can expect CSS Regions to be supported in Safari 6.

You can see the latest browser support on CanIUse.com.

Demos

I've created a couple of demos, one for browsers that don't support iframe flows (Chrome) and one for browsers that only support iframe flows (Internet Explorer 10). Provided the other browser vendors do not implement something radically different, these demos should work when they implement CSS Regions.

If you'd like more information, you can check out the W3C Spec for CSS Regions.