CSS Regions

Published: This article is about the CSS regions model which allows content to flow across multiple areas called regions. This is an advanced content flow mechanism, which can be combined with other properties to arbitrary position the regions where content flows. The article also contains a set of live (spoiler alert: only one (bad one!), others are just image) examples of how regions work should work.

Regions were proposed to W3C CSS (Cascading Style Sheet) by Adobe, to extend the existing possibilities of CSS and to be able to build complex, magazine-like layouts using web standards.
W3C Specification: CSS Regions Module Level 3

More complex layouts require flexibility in placement of boxes for content flows, regardles of their sizes and positions. CSS regions provides an advanced content flow mechanism which can be divided into three categories:

  • Threading content — content that flows from one area to another.
  • Arbitrarily shaped containers — text displayed in non-rectangular areas.
  • Region styling — styling content depending on the area in which it flows.
You can read more about the examples of each on the CSS3 regions: Rich page layout with HTML and CSS3 article in the Adobe Developer Center.

Implementation

Consider this layout, which requires sophisticated content flow:

Source: W3C Editor’s Draft — CSS Regions Module.

HTML

The following HTML code snippet shows the content to flow between the regions 1, 2, 3 and 4 as illustrated on the example above. Region A represents an image.

<!-- An article -->
<article id="article">
    <h1>Introduction</h1>
    <p>This is an example ...</p>

    <h1>More Details</h1>
    <p>This illustrates ...</p>
    <p>Then, the example ...</p>
    <p>Finally, this ...</p>
</article>

<!-- A set of HTML elements, which will be used as regions -->
<div id="region1"></div>
<div id="region2"></div>
<div id="region3"></div>
<div id="region4"></div>

This rendered layout is the desired result:

Source: W3C Editor’s Draft — CSS Regions Module.

CSS

#article {
    flow-into: article_flow;
}

#region1, #region2, #region3, #region4 {
    flow-from: article_flow;
}

We selected an element #article whose content will be part of a "named flow", called article_flow. Keep in mind that it could be given any name.

It is and the flow-into and flow-from properties require vendor prefixes in order to work. You can use @LeaVerou's -prefix-free to help you with that and you can also read an article about the recent vendor prefix drama. For a better understanding I encourage you to read prefix or posthack, an article by Eric A. Meyer.

Then we select all the elements (#region1, #region2, #region3, #region4) that will render the content that is part of this named flow (article_flow in our example). These elements are now called regions and the content will be "poured" into them.

Regions styling

We can also adjust the styles of content that flows through a region. It is a form of context-based styling, similar to Media Queries.

/* Default style of a paragraph */
p {
    color: grey;
}

/* Additional styling of a paragraph when it falls into region1 */
@region #region1 {
    p {
        font-weight: bold;
        color: #0C3D5F;
        font-size: larger;
    }
}

Region flow break properties

We can control where breaks occur. Breaking content into segments fitting in regions is similar to breaking content into pages or columns, with a couple of additional values:

break-before
auto | always | avoid | left | right | page | column | region | avoid-page | avoid-column | avoid-region
break-after
auto | always | avoid | left | right | page | column | region | avoid-page | avoid-column | avoid-region
break-inside
auto | avoid | avoid-page | avoid-column | avoid-region
For more information, visit region flow break properties: ‘break-before’, ‘break-after’, ‘break-inside’ .

The region-overflow property

region-overflow
auto | break
The image below illustrates how region-overflow work with the combination of overflow property.

Source: CSS Regions Module — The region-overflow property.

API

The NamedFlow interface

There is the NamedFlow (getFlowByName) interface avaliable which provides access to the document's named flow instances:

overflow
the property is true if the named flow does not fully fit in the associated regions. Otherwise, it is false.
contentNodes
the property returns an ordered collection of nodes that constitute the named flow. Note that this collection is live: every time it is queried it must return the same object, and the object is always up to date.
getRegionsByContentNode()
the method gets a collection of regions that contain at least part of the target content node. This can be used to navigate by bookmark in paginated view: the method returns regions containing the bookmarked element, which are then passed to pagination UI to show desired region or page.

Region flow layout events

Region Event Targets dispatch regionLayoutUpdate events when there is a possible layout change of their named flow segment.

Browser support

In terms of browser support, regions are not well supported, except for the latest webkit browsers and are only suitable for non-production sites, personal projects and for testing.

But as far as I've tested, none of the browsers support properties besides flow-into and flow-from. Even the overall behaviour is somehow odd and a lack of support for region styling, heights, breaks, shapes, gaps, etc., gives us little to no control over content.

Supported by:
  • Chrome 15+
  • Safari 5.2+
  • Internet Explorer 10+

An example Examples of CSS Regions

After I have spend a few hours testing how CSS regions *actually* work in browser(s), I've come to a conclusion that the support is not suitable yet for the real use. Neither I expected it to be, but what I at least wanted to put online was an example of how or where CSS regions are actually useful. Eventually I gave up due to overall unexpected behaveour and a lack of support for region styling, heights, breaks, shapes, gaps, etc.

This is what I was doing and eventually gave up https://galjot.si/experiments/css3_regions/.


A couple of use cases of CSS regions and exlucions could also be found on the CSS Working Group WIKI, but note that this is specification is still a draft, and the examples there lack the fineness.

Adobe has prepared some examples of how CSS regions (should) work and can also be used in a combination with other web standards, such as using CSS media queries to build layouts that can adapt to different device orientations, portrait and landscape.

Adobe's example of CSS regions Adobe's example of CSS regions Adobe's example of CSS regions Adobe's example of CSS regions Adobe's example of CSS regions Adobe's example of CSS regions Adobe's example of CSS regions CSS3 regions: Rich page layout with HTML and CSS3
blog comments powered by Disqus