What are regions?

● ● ● ● ● ●

Examples of regions are:

• One column of a multi-column element
• A slot in a grid template
• A page in paged media
• A margin box in a page
• and other pseudo-elements (::first-line, ::before…)

Regions – concepts

● ● ● ● ● ●

CSS Regions proposes two new features:

• Connecting multiple disjoint regions into a flow
• Styling regions rather than elements

Regions – named flows

● ● ● ● ● ●

#article {
  grid: "A A e"
        "A A e"
        "b b e"
        "c d e";
  chains: b c d e }

Warning:

• Currently multiple notations in study
• May be postponed to level 4

Region-based styling (1/2)

● ● ● ● ● ●

<div id=article>
 <h1>Introduction</h1>
 <p><img src="sunset" alt="">
 <p>This is an example…

 <h1>More Details</h1>
 <p>This illustrates…
 <p>Then, the example…
 <p>Finally, this…
</div>

Note how the 2nd P starts in region b in large & bold and continues in region c with normal style

Region-based styling (2/2)

● ● ● ● ● ●

p::flow(b) {
  font-weight: bold;
  font-size: 120% }

@region ::slot(b) {
  p {
    font-weight: bold;
    font-size: 120% } }

Warning:

• Currently multiple notations in study
• May be postponed to level 4

Regions – prototypes

● ● ● ● ● ●

Note: These do not actually support regions yet, but require (empty) elements or iframes in the HTML.