CSS Regions
Published: 15th of April, 2012
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:
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.
Introduction
This is an example ...
More Details
This illustrates ...
Then, the example ...
Finally, this ...
This rendered layout is the desired result:
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 still an early stage currently
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.
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 yet
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 currently
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+
After I have spend a few hours testing how CSS regions *actually* work in browser(s),
I've come to a conclusion that the current 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
http://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.