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

Last modified 11 years ago Last modified on Apr 19, 2012 11:05:27 AM