Region

Summary

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.

Properties

regionOverset: A region’s display state within a region chain.

Methods

getComputedRegionStyle: Returns styles calculated for an element as it appears within a region, including styles from @region rules applied to ranges within the element.
getRegionFlowRanges: Returns a series of Range objects that represent the fragments of DOM content that currently flow into the region.

Events

No events.

Examples

Determines if an element is currently set to behave as a region:

function isRegion(node) {
    // element never behaved as a region:
    if (! node.getRegionFlowRanges) return(false);
    // element only previously behaved as a region:
    if (node.getRegionFlowRanges() == null) return(false);
    // element is currently a region:
    return(true);
}

Usage

 Use the Region interface to determine whether any content flows through the region, what content currently displays, and any special CSS styling that applies.

The interface is still available for elements that change back to non-region elements, when their flow-from property becomes none.

Notes

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

Related specifications

CSS Regions Module Level 1: W3C Working Draft