CSS Regions
Published:
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.
Implementation
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>
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
The region-overflow property
region-overflow
- auto | break
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.