Say hello to CSS Regions Polyfill

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.

Before going into bits and pieces of this JavaScript library let me explain what CSS Regions is for those who might not know. This is one of the new CSS features proposed by Adobe and I think it is one of the most exciting. Why’s that? Because it extends the layout toolkit that web designers and developers will be able to use hopefully very soon. In a nutshell it allows you to separate the content from the presentation. With CSS Regions you can define a flow (this will be the source/content of your layout) and a region chain (this will be the containers that will consume the content from the source). Once you have defined these two the browser will do the rest of the job in flowing the content through the regions and splitting the content once a region from the chain is “full” and moving to the next one. CSS Regions has a powerful and yet simple CSS syntax plus a powerful CSS Object Model that enables developers to tap into this feature from JavaScript.

You can see in the image below how the two parts (flow and regions) are combined together to create the document.

cssregions1

CSS Regions it is the building block for rich layouts, the type of layout that is not possible today without relying heavily on JavaScript DOM manipulation. And because it just another CSS feature you can use it together with media queries if you want to support different layouts for different screen sizes. In the picture below you can see an example of a complex layout where two different articles are flown into two different region chains on the same page.

cssregions2

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

Which brings us to the subject of this blog post, the CSS Regions polyfill. We think that by providing a JavaScript library that brings support for some of the CSS Regions features in modern browsers we will encourage people to take a look at this proposal and start use it for real world examples. Which in turn will help us make sure that the proposal will actually meet developer’s needs and it will be indeed an awesome addition to CSS.

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!

Resources:

4 thoughts on “Say hello to CSS Regions Polyfill

  1. Pingback: Revision 107: Unresponsive Design, Docsprint und ein paar Links | Working Draft

  2. This is fantastic, Regions is one of the more exciting proposals I’ve seen recently and I’m glad to hear a polyfill exists. A couple of thoughts:

    1) No IE Support at all? This seems like a bit of an awkward omission? Is there a particular reason?

    2) I’ve been playing around with an HTML container div and paragraph children with display set to inline-block and a maximum width for columnar display. Using this approach the goal is to have the layout restructure the columns so that the width of the container can be a percentage of the total space and hold a reasonable number of columns. Currently it feels the only way to do this is with a matrix sort and repaint with what amounts to scrambled paragraph order. This degrades nicely as the original, non-javascript, order is maintained. Does the polyfill allow a better solution for this problem, including the downgrade?

  3. Crispen,

    You are right. It is an unfortunate omission. Basically we didn’t have enough time to put into making the code work on IE. We should be adding support for IE probably.

    CSS Regions is an awesome solution for building complex layouts that are liquid/adapts to different screen resolutions.

    In general, if you have comments like feature requests or bugs it would be awesome if you can also drop them here: https://github.com/adobe-webplatform/css-regions-polyfill/issues?state=open

  4. Thanks for the response. I’ll go watch the Repo and give it a try.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>