CSSRegions.js

CSSRegions.js is an experimental polyfill that uses JavaScript to bring CSS Regions functionality to browsers that don't support the feature.

Download iOS 4+, Android 4+, Firefox, Chrome, Safari 5+, Opera. See feature support.

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

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

Browser support

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

Prefixed CSSOM properties and events

Known issues

This experimental script has a few known limitations:

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.