css-regions

• Comments from section
• All comments
• Help

WebPlatform Docs welcomes all comments. If you want to comment, please register or log in. It is free.

This tool helps to make and review comments inline.

How to Use

insert instructions, with images, here

CSS Regions API

This page has been flagged with the following issues:

High-level issues:

• Needs Review

W3C Editor's Draft

Summary

Programmatic interface to content that flows through a series of chained region elements, as specified by flow-into and flow-from CSS properties.

Page	Summary
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.
Region	The 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.

API Name	Summary
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.
Region	The 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 flow-into and flow-from CSS properties. The flow-into property diverts content into a named flow, while 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.

The following interfaces allow programmatic access to the CSS Regions feature:

• A getNamedFlows() method supplements the Document interface.

• The NamedFlow interface provides access to the content defined as flow-into, and the series of layout regions defined as flow-from.

• The Region interface provides information on each region within the chain.

• The CSSRegionStyleRule interface allows manipulation of @region rules.

For an overview of CSS Regions, see Using CSS Regions to flow content through a layout.

See also

Related articles

Regions

• CSS Regions API

• CSSRegionStyleRule

• NamedFlow

• firstEmptyRegionIndex

• getContent

• getRegions

• getRegionsByContent

• name

• overset

• regionlayoutupdate

• Region

• getComputedRegionStyle

• getRegionFlowRanges

• regionOverset

• @region

• break-after

• break-before

• break-inside

• flow-from

• flow-into

• region-fragment

• getNamedFlows()

• Using CSS Regions to flow content through a layout

External resources

• 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