Adobe

decor

Web Platform Team Blog

Making the web awesome

CSS Regions: New working draft

On May 28th 2013, we published a new W3C working draft for CSS Regions, one of the features proposed by the Adobe Web Platform team. Here are the most important changes you should be aware of:

Renamed the region-overflow property to region-fragment
The old region-overflow property, which controlled the behaviour of the last region in the region-chain, was renamed to region-fragment to make it clear it doesn’t change overflow behavior, but rather fragmentation. Its functionality has not changed.
Named flow events
We refined the events generated by named flows, to make them more clear and give developers better control over the timing of their event handlers. Here’s what changed:
• Added the regionoversetchange event
The regionoversetchange event is dispatched if the value of the regionOverset property changes for any of the regions in the region chain, including the case when regions are added or removed from the chain.
Most uses of the regionlayoutupdate event were to track how the named flow fits in the region chain. This new event should be used for these cases now.
• Added the regionfragmentchange event
The regionfragmentchange event is dispatched on any change to a named flow’s fragmentation through its region chain, including changes to any overset fragment. This event is not yet implemented in WebKit or Blink but we will be adding it in the future.
• Removed the regionlayoutupdate event
The regionlayoutupdate event has been removed from the Regions spec and will be removed from WebKit and Blink around mid-August 2013.
Make sure to update your code to use the new regionoversetchange event instead of it.
Defined offsetParent interaction
The offsetParent algorithm was updated for elements inside named flows so that, if no valid offset parent is found within the named flow, the body element is returned. This of course has a direct effect on all offset values: offsetTop, offsetLeft, offsetWidth and offsetHeight.

All these changes (except for the removal of the regionlayoutupdate event and the addition of the regionfragmentchange event) are already available for you to test in WebKit Nightly and Chrome Canary.

For a complete list of all updates in this new version of the Regions working draft, please see the change log.

7 Comments

  1. July 15, 2013 at 9:35 am, Best of JavaScript, HTML & CSS – Week of July 8, 2013 | Flippin' Awesome said:

    […] Radu Stavila shares details on the new working draft for CSS Regions from the W3C. CSS Regions: New working draft […]

  2. July 19, 2013 at 7:13 am, Bruce Lawson’s personal site  : Reading List said:

    […] CSS Regions: New working draft – for those who really, really wish the web were print, after all […]

  3. July 20, 2013 at 6:01 am, Tweet Parade (no.29 July 2013) - Best Articles of Last Week | gonzoblog said:

    […] CSS Regions: New working draft – On May 28th 2013, we published a new W3C working draft for CSS Regions, one of the features proposed by the Adobe Web Platform team. Here are the most important changes you should be aware of. […]

  4. July 23, 2013 at 12:04 am, Weekly Design News (N.193) said:

    […] CSS Regions: New Working Draft by Radu Stavila […]

  5. July 23, 2013 at 12:14 pm, Weekly Design News – Resources, Tutorials and Freebies (N.193) - iDevie - iDevie said:

    […] CSS Regions: New Working Draft by Radu Stavila […]

  6. July 25, 2013 at 3:07 am, Weekly Design News – Resources, Tutorials and Freebies (N.193) | Joe Garde said:

    […] CSS Regions: New Working Draft by Radu Stavila […]

  7. July 30, 2013 at 6:44 am, Tweet Heat – the hottest tweets of the month [June 2013] | Joindahunt. said:

    […] CSS Regions: New working draft – On May 28th 2013, we published a new W3C working draft for CSS Regions, one of the features proposed by the Adobe Web Platform team. Here are the most important changes you should be aware of. […]