Web Platform Team Blog

Making the web awesome

A tale of CSS Regions and CSSOM: moving forward within the web community

Soon after we proposed the CSS Regions in 2011, it became obvious that we have to allow content creators a good APIs for interacting with CSS regions. In this regard, the CSS Object Model (CSSOM) addition to the W3C CSS Regions specification defined the appropriate mechanisms to determine if there are enough regions to flow all the content from a named flow. Authors are thus able to find the best way to present the information to their users, in different screen sizes and orientations.

We completed work on the CSSOM part and got it in-line with the latest version of the specification. When the patch for WebKit bug 97657 landed in WebKit trunk that removed the deprecated API Document.getFlowByName, the CSSOM part of the W3C specification and the implementation moved closer to a final, more mature and stable version. We felt this was a good time to take a look back, enjoy this milestone and share some of our thoughts about the journey we took to reach here.

The Region interface

Following the feedback from the community, we realized how important is to allow non-element CSS boxes to become regions as well. For this reason, the latest version of the specification defines a Region interface containing all the region-related methods which were previously specified on the Element interface. Naturally, the Element interface implements the Region interface. However, when we decided to implement the Region supplemental interface in WebKit, we realized that this would entail a bigger amount of work and changes than we initially thought.

We asked the WebKit community for their feedback on the webkit-dev mailing list. Adam Barth was especially helpful, giving us great feedback and suggestions. So for now, we are keeping the region attributes and functions on the Element interface, which is the only one implementing the Region interface. We will revisit the implementation to provide a more advanced solution when other objects will require the implementation of the the Region interface. We also filed a WebKit bug to make sure we do not forget about it when the time comes :).

The named flow lifetime

One other major area that we have now found made clear, both in the W3C specification and implementation, was the lifetime of the named flow object. The named flow object is the CSSOM counterpart of the flow thread concept and its lifetime resembles the lifetime of other CSSOM objects. Implementing the named flow lifetime in WebKit proved more challenging than we initially thought, as we encountered some crashes that we have since managed to fix.

Document’s NamedFlowCollection

Getting the named flows for a document is much easier these days, thanks to Tab Atkins’ suggestion for exposing a named flow collection on the Document interface. The items from the NamedFlowCollection can be retrieved either by name or by index, so the developers can use whatever they prefer. The addition of the NamedFlowCollection allowed us to remove the old way of obtaining a named flow from a Document, which forced the developer to know the flow name in advance to accomplish their goals.

The road ahead

Among other things worth mentioning, I would point out the clarification of static versus live collections in regions CSSOM. Right now, all of our returned collections are static snapshots of the underlying data. In the future, we do not foresee any major changes for the APIs, both in the W3C specification and in the WebKit implementation. We still need to clarify the behavior of the NamedFlow asynchronous regionLayoutUpdate event, implement the getComputedStyleInRegion method that will allow users to inspect the computed style of an element displayed in a region having region styling rules and also finish the WebKit implementation of the CSSRegionStyleRule interface.

Final thoughts

Developing a feature like CSS Regions in the public space has proved extremely helpful (e.g., getting code reviews, scrutiny on interaction with other features, discussions on alternate designs). In this case, the web community involvement has been essential to create an emerging CSS standard supported by a rock-solid implementation.

We think that CSS Regions provide both  a powerful and clear object model as well as an up-to-date implementation in WebKit. Please try out these demos on CSS Regions and create your own too! We would love to hear your opinion on regions and their exposed object model.

Stay tuned for more CSS Regions news!

Comments are closed.