CSS Regions: What’s Possible Now, and What’s Coming

I just made a quick screencast to show the current state of CSS Regions, and to demonstrate some new capabilities that will be here soon. In general, there are two aspects to CSS Regions:

  1. The ability to have text automatically flow between regions.
  2. The ability to hook into that flow using JavaScript in order to create more dynamic layouts.

If you use Chrome (Adobe’s work on CSS Regions is in WebKit which Chrome uses), you can go ahead and see text flow already working (including Chrome for Android). Other browsers have already committed to supporting CSS Regions, and we should know more about when their implementations will land soon. Let me know below if you have any comments or questions.

8 Responses to CSS Regions: What’s Possible Now, and What’s Coming

  1. Richard says:

    How does this relate to the paged media stuff? http://dev.w3.org/csswg/css3-gcpm/

    • Christian Cantrell says:

      There’s some overlap, and some elements (especially those related to CSS exclusions) are being incorporated.

  2. gianfranco says:

    these features are also present on Air Webkit ?

  3. Chris Blown says:

    The last example is really cool, nice work.

  4. Pingback: Prototyping in HTML « Christian Cantrell

  5. First of all congrats to Adobe for this great proposal to the W3C. This is truly incredible. I’ve been playing around these features since they first appeared in Webkit. For me CSS regions and CSS exclusions are the first step into Web-to-Print without having to use the also remarkable 😉 Indesign Server. As a founding member of the Open Source cross-media publishing system pimcore (pimcore.org) this is quite a great outlook…

    For creating print-ready PDFs we currently use server-side wkhtmltopdf and phantomjs and the integration of CSS regions and exclusions in these tools will provide great new possibilities.

    By the way: For creating print-layouts, TOCs, page numberings, headers and footers it would be great to know (reflected in the DOM and accessible via Javascript) into which region certain content is being rendered. But that are just my two cents…

    Cheers from Austria

  6. Matthew says:

    FYI CSS regions are being removed from Chrome because the spec is unstable. They are already gone in Chrome Canary. I landed a patch that allows them to be turned back on via a command line flag (–enable-css-regions) but I would not spend too much time developing web content with CSS regions for now.