This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

CSS Regions API

Summary

Programmatic interface to content that flows through a series of chained region elements.

PageSummary
CSSRegionStyleRuleRepresents an @region rule in a CSS style sheet, which applies styles to fragments of content that flow into a CSS region.
NamedFlowRepresents 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.
NamedFlowCollectionObsolete. Replaced by NamedFlowMap. Represents a static snapshot array of a document’s available named flows
RegionThe Region interface is available for any element that serves as a CSS region, whose flow-from CSS specifies it displays content from a named flow.

Usage

 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.

See also

Related articles

Regions

External resources