Bert Bos & Eva Kasal | CSS3 in Style

What are regions?

Examples of regions are:

Regions – concepts

CSS Regions proposes two new features:

Regions – named flows

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


Region-based styling (1/2)

An element
     that is partly in one region and partly in another can have
     different styles in each region.

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

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

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% } }


Regions – prototypes

Named flows:

Region-based styling

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