regionOverset
Summary
A region’s display state within a region chain.
Property of apis/css-regions/Regionapis/css-regions/Region
Syntax
Note: This property is read-only.
var regionState = region.regionOverset;
Return Value
Returns an object of type StringString
A region’s display state within a region chain:
overset indicates the region is the last in the chain, and does not have enough room to display remaining content. See region-fragment for display options.
empty indicates content was accommodated by previous regions in the chain, or that no content is available to flow into the chain.
fit indicates various scenarios:
- When content appears within the last region in the chain but does not overflow it, as described above in overset
- For regions that flow content into subsequent regions in the chain
- For regions that are too small to display the next available item of content, such as an image, which gets pushed into a subsequent region
- For elements that no longer behave as a region, which occurs when their flow-from property reverts to none
Examples
Check if region needs to be deleted or appended:
if (region.regionOverset == 'empty') {
// delete region?
} else if (region.regionOverset == 'overset') {
// add additional regions?
}
Notes
Not to be confused with overset, which indicates whether the overall named flow features too few display regions.
Related specifications
- CSS Regions Module Level 1
- W3C Working Draft
See also
Related articles
Regions
regionOverset
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