HTML and CSS Reference
In-Depth Information
Regions
•
Demo
• Browser support: IE 10+, Chrome 15+, Safari 6+
The closest equivalent to regions would be InDesign's linking of text frames.
With the properties in this proposal, you can make the content of selected
elements flow through another set of elements. In other words, your content
need not be tied to the document flow any longer.
To begin, you need to select elements whose content will be part of a
“named flow,” like this:
article.news { flow-into: article_flow; }
Here, all of the content in the
article
element with the class name
news
will belong to the flow named
article_flow
.
Then, you select elements that will render the contents that are part of this
named flow:
#main {
flow-from: article_flow;
}
Here, the element with the ID
main
will be used to display the content in the
flow named
article_flow
. This element has now become a region that
renders the content of a named flow. Note that any element that is a region
establishes new “block-formatting contexts” and “stacking contexts.” For
example, if a child element is part of a flow and is absolutely positioned, it
will now only be absolutely positioned with respect to the region it belongs
to, and not to the whole viewport.
