Region

• 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

Region

This page has been flagged with the following issues:

High-level issues:

• Needs Review

W3C Editor's Draft

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

API Name	Summary
regionOverset	A region's display state within a region chain.
ms-region-overflow

Methods

API Name	Summary
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.
ms-get-region-content

Events

No events.

Examples

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

JavaScript

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

Specification	Status	Related Changes
CSS Regions Module Level 3

Compatibility

Desktop

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic Support	20 -webkit	Unsupported	Unsupported	Unsupported	534 -webkit

Mobile

Feature	Android	BlackBerry	Chrome for mobile	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Opera Mini	Safari Mobile
Basic Support	Unsupported	Unsupported	Unsupported	Unsupported	Unsupported	Unsupported	Unsupported	Unsupported

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