CSS Regions

Bring magazine layouts to the Web

• Collect content in flows
• Distribute content in regions
• Regions with different geometry/style
• Combine with flex box/multi-column/exclusions

Demo - a sample magazine-style layout

Collecting the content: Named flows

• Gather conceptually related content
• Identified by name

Code sample / -webkit-flow-into

Displaying the content: Regions

• Block container box that renders content from a named flow
• webkit-flow-from

Regions are scriptable via CSSOM

• NamedFlow interface
• webkitGetFlowByName

Implementation in WebKit

• Enabled on Mac/Win port, off otherwise
• Flag to enable

Future development for CSS Regions

Evolving the spec

• Editor's draft
• Auto-sized regions
• Improved CSSOM

WebKit implementation will prototype some spec features