The Future of CSS 249
Figure 19-5: Content flows around an exclusion element based on the use of various keyword values.
Regions
Chapter 7 explained CSS columns, the method of flowing content across
multiple sequential columns. The CSS Regions Module (http://dev.w3.org/
csswg/css-regions/) extends this idea, allowing content to flow into mul-
tiple regions, which aren’t required to be consecutive in layout order, and
regardless of their position on the page. Think of a long magazine article
that continues across multiple, though not necessarily sequential, pages.
CSS Regions makes this possible by defining an area of content and
assigning it a unique identifier, known as a named flow, with the flow-into
property:
E { flow-into: foo; }
Once this identifier has been assigned, the content of element E can
flow into multiple regions. To do this, use the named flow as the value of
the flow-from property; for example, if you wanted to flow the contents of foo
into the elements F and G, this is the code you’d use:
F, G { flow-from: foo; }
The content of E flows into F first because it’s listed first in the code. If
the content overflows F, the overflow goes into G. Figure 19-6 shows content
flowed into three independent areas. (I’ve added background shading to
make each area easier to identify.)
a
C
B
d
