CSS Regions JavaScript Polyfill

Usage

Download and link the cssregions.js script in your page.

<body>
  ...
  <script src="cssregions.js"></script>
</body>

Use -adobe- prefixed CSS Regions syntax in your stylesheet.

#content{
  -adobe-flow-into: myFlow;
}

.region{
  -adobe-flow-from: myflow;
}

There's no setup necessary. Just load the polyfill script and it will automatically parse and apply the CSS Regions syntax it finds in the page's stylesheets. If the browser supports CSS Regions, the polyfill will not be run and it will defer functionality to the native implementation.

Examples

Newspaper article layout using CSS Regions

Examples using CSS Regions proposal plus JavaScript for browsers without support (CSS Regions polyfill)

Browser support

iOS 4+
Android 4+
Firefox
Google Chrome
Safari 5+
Opera

Limitations

The CSSRegions.js polyfill is an experimental script that demonstrates basic CSS Regions features. It uses JavaScript to simulate the functionality as defined by the CSS Regions W3C proposal. Because it's using JavaScript, the polyfill performs slower than a native browser implementation of CSS Regions.

It is not recommended to use the CSSRegions.js polyfill in a production environment as a substitute for native browser support.

The polyfill works only with -adobe- prefixed CSS syntax and CSSOM properties.

Prefixed CSS syntax

Use -adobe-flow-into: IDENT to collect content into a named flow
Use -adobe-flow-from: IDENT to render content from a named flow

Prefixed CSSOM properties and events

The document.getNamedFlows() method becomes document.adobeGetNamedFlows()
The regionlayoutupdate event becomes adoberegionlayoutupdate
The regionOverset property becomes adobeRegionOverset

Known issues

This experimental script has a few known limitations:

Media Queries - the polyfill does not automatically react to changes determined by media queries;
DOM Manipulation - the polyfill does not automatically react to changes in the document structure; See workaround
Events - the polyfill breaks down DOM nodes to distribute them into regions. This may affect event handlers registerd on those nodes;
Region Styling - there is currently no support for @region styling blocks;

Workarounds

The polyfill may be forced to re-layout the content by calling CSSRegions.doLayout() in a script, after making changes to the stylesheets or elements in the document.

<script>
  // Add elements to the document
  // then
  CSSRegions.doLayout()
</script>

Documentation

Contributing

The soure code for the CSSRegions.js polyfill is available on GitHub. Code contributions are welcome, but please read the contribution guidelines before starting work.

License

Apache License 2.0

Feedback

We're looking forward to hear your thougts and suggestions. You can tweet us at @AdobeWebPlatfrm or open an issue on GitHub if you spot a bug.