The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.
CSS Regions API
This article is Ready to Use.
W3C Working Draft
|CSSRegionStyleRule||Represents an @region rule in a CSS style sheet, which applies styles to fragments of content that flow into a CSS region.|
|NamedFlow||Represents content to flow among various block region elements. The NamedFlow interface allows access to both the content of the flow and the series of regions in which it displays, and helps determine if the content exceeds or falls short of the number of regions necessary to display it.|
CSS Regions are defined by two CSS properties. The
flow-into property diverts content into a named flow, and the flow-from property pours that flow's content through a dynamic chain of region elements. The feature allows content to follow a path through arbitrarily placed magazine-style layout elements. Use as follows:
- The getNamedFlows() method, available via the Document interface, retrieves all of a document's named flows as a NamedFlowCollection.
- Iterate over the NamedFlowCollection as an array, or call namedItem on it to access each NamedFlow by its name.
- The NamedFlow interface provides access to the content defined as flow-into, and the series of layout regions defined as flow-from. Use it to check if the amount of content matches the allotted set of regions in which it appears.
- The Region interface provides information on each region within the chain, and allows access to fragments of content that dynamically appear there.
For an overview of CSS Regions, see Using CSS Regions to flow content through a layout.
- W3C editor's draft: CSS Regions Module Level 3
- Adobe Web Standards: CSS Regions
- Adobe Developer's Network: CSS3 Regions: Rich page layout with HTML and CSS3
- Sample pages