I am very happy (and proud :D) to announce that we’ve finally made CSS Regions polyfil public. This was something I’ve been working on together with my colleague Razvan Caliman and frankly we couldn’t wait to see it run freely in the wild.
You can see in the image below how the two parts (flow and regions) are combined together to create the document.
CSS Regions current status
As of today, the CSS Regions proposal is a working draft. This means that while there is more work ahead of us until it will reach the W3C Recommendation status, the specification has made a lot of progress and is maturing. WebKit, Chrome Canary and Stable, and IE 10 have support for some of the features of CSS Regions.
CSS Regions Polyfill Supported Features
The polyfill supports the following browsers: Safari Mobile, Safari, Android (latest version), Chrome, Firefox, and Opera. You might ask why bother if there is already support in some nightly build browsers and even in the latest stable Chrome browser? First, in order to test this feature you have to enable a flag and second, you never know when an experimental feature is disabled. After all it is not a W3C recommendation and many things can happen. In terms of features, we support CSS syntax for defining flows/regions and some of the CSSOM APIs such as document.getNamedFlows(), regionlayoutupdate event, and regionOverset property. We don’t support yet region styling, break before/after/inside. Also if you manipulate the DOM structure at runtime we don’t pick up the changes automatically (though we have an API that you can use to modify the regions/flows and trigger the layout).
If you want to play with this and get a better sense of how it is working, then look at the regions examples that use the polyfill.
Where to get it
If I managed to make you curious then go ahead and take a look at the code and examples that come with. It is on GitHub of course and it is released under Apache License 2.0.
How to get involved
We’d love to hear back from you – you can send me an email, tweet, or write a comment. If you find issues or you have requests make sure you open an issue on GitHub. If you want to contribute code just go ahead and read these contribution guidelines.
We have plans to improve this polyfill, so stay tuned!