Adobe

decor

Web Platform Team Blog

Making the web awesome

Report from the Web trenches: notes from the May 2012 CSS and SVG W3C Working Group Hamburg Meetings

Several of us from Adobe’s Web Platform and authoring team attended the Hamburg W3C meetings the week of May 7th. Rik Cabanier, Alan Stearns, Dirk Schulze, Steve Zilles, Arno Gourdol and myself were representing Adobe. There were three meetings:

  • SVG Working Group meeting on Monday and Tuesday (May 7-8)
  • FX Task Force meeting on Wednesday (May 9)
  • CSS Working Group meeting on Thursday and Friday (May 10-11)

Adobe hosted these meetings in its Hamburg office. They happened just before the Hamburg port anniversary (an event that attracts hundreds of thousands of people here as we are leaving).

Here is a short summary of the meeting results on features Adobe is participating in the development of and what we are planning to do next.

Important note

All the new features discussed here are available, but you’ll need a prototype Chromium build from Adobe to try most of them out.

Meeting Preparation

The way we prepare for the W3C meetings is by trying to align our implementation prototypes and demos along with our specification work. We think this is important because it helps us ground our proposals and input to the specification process in both implementation reality and usability. In other words, we are making sure that what we are proposing can a) be implemented and b) is usable in use cases and demos we can think of.

We are also trying to give the groups advance notice of the things we are proposing and for example, we emailed the public-fx (see this message on CSS shaders progress and the www-style (see this other message on CSS regions, CSS exclusions and CSS page templates) mailing lists before the meeting, so that people interested in the latest progress on the specification, prototype and demos can access them. Our work is open, and we are working to make it easily accessible to help move the specifications we contribute to forward.

So, what happened at these meetings?

A lot was discussed, argued and resolved during these five days and the detailed meeting minutes are available on the mailing lists: Monday (SVG), Tuesday (SVG), Wednesday (FX Task Force), Thursday (CSS) Part I, Part II, Part III, Friday (CSS) Part I, Part II, Part III, Part IV, Part V. The following is a highlight of the topics we currently focus most on at Adobe.

Test the web forward event

The FX group decided to support this event that Adobe is organizing. You can see the details about this event here. The meeting was a great opportunity to talk to different key people in the working groups and get feedback, enlist participation and speakers. The event is in just a few weeks and our goals is to help the community to contribute to Web standards through increased testing (for better implementations and interoperability).

CSS Transforms

Dirk Schulze is one of the co-editors of the specification and presented the progress on the merged CSS Transform specification (which combines the former CSS 2D transform, CSS 3D Transform and SVG transforms).

The FX task force agreed to publish a new public Working Draft. There were positive comments on the level of testing that is happening on the specification and the effort to drive this specification to last call (the final stage for specification drafts before they become a candidate recommendation) as soon as possible.

CSS Compositing and Blending

The CSS Compositing and Blending draft is a fairly new effort that is co-edited by Canon’s Nikos Andronikos and Adobe’s Rik Cabanier (Rik blogged about this feature recently). This is an evolution of the former SVG Compositing draft but expands the feature to all of CSS, beyond SVG elements only. This new feature will let us do very nice blending operations to ‘mix’ the colors of the elements with the background as illustrated in the following image.

The group’s response to the new specification draft, demos and presentation of what the features are was very positive. The demos in both WebKit and Firefox were very convincing. The group agreed to discuss a publication request as soon as Canon (our co-editor on this spec) updates the section on alpha compositing (Porter Duff rules).

CSS Shaders

I presented the latest security issues status to the group along with demos running on our prototype implementation.

The main thing we wanted to discuss with the group is how the proposed limitations (prevent rendered content access from the shader code) still allow a very compelling feature level as can be seen on the demos page we put together (these are actually the ones I showed during the meeting).

The response was positive and the group agreed to discuss a publication request (First Public Working Draft) as soon as we incorporate the latest proposal into the specification draft.

CSS Pagination Template

Alan Stearns presented the work he has done on CSS pagination templates. This proposal was meant to demonstrate and illustrate how regions could be used without ‘empty elements’. The demos were pretty useful to show how easy it could be to create pagination content with an overflow-style: paged-x and @template rules to specify a set of regions into which content would flow.

The group’s response was pretty positive and we think this proposal achieved its goal of showing how regions can be created by other means than ‘empty elements’.

Generated Boxes

We actually started all our layout (regions/exclusions/page template) discussions with one on the possible mechanisms for generating boxes without ‘empty elements’. We discussed three methods:

  1. the page templates proposal with its “@slot” rules for creating region boxes.
  2. repeating boxes. The idea here is to generate a new identical box for elements that overflow their boxes. For example, if a multicolumn element overflows its bounds, a new box of the same size would be generated and follow the element’s box in the block direction. See the detailed minutes for more on this topic.
  3. expanded pseudo-elements. Similar to the :slot() proposal we made last year or other possible generated boxes solutions with pseudo-elements.

The group accepted Opera’s offer to work on the repeating boxes proposal and discuss how this would integrate with regions. We will work with Opera on this and provide input. The group also agreed to accept our proposal to make a more specific proposal on expanded pseudo-elements that could be used as regions. This may result in working on the CSS Content draft and produce a Level 3 version with only the “:before” and “:after” pseudo-elements and then a Level 4 version with the new pseudo-elements we would propose. However, more work is needed before we are ready to make a proposal and we will discuss with the CSS working group in which specifications these ideas should be integrated.

CSS Regions

A new working draft of the CSS regions specification was published recently with a lot of updates and improvements to the CSS Object Model section, support for auto sizing of regions and an improved section on the processing model. We worked on implementing all these features in our implementation prototype and also improved our region styling support. You can check this out here.

The main issue we discussed in the meeting was the automatic generation of boxes (see “Generated Boxes” above) and whether or not elements should be disallowed as regions. We asked the group for feedback on the auto sizing processing model work we have done and pointed to our implementation prototype and examples.

There was no final resolution on the issue of “elements v.s., generated boxes for regions”, but it seems that the group is leaning towards making the specification examples use a box generation mechanism (see above) as the ‘best practice’ way of creating regions.

So this issue will get resolved as we make progress on this other topic.

CSS Exclusions and Shapes

CSS Exclusions and Shapes is a very exciting specification because it brings much needed features to page layouts: the ability to place exclusions with any CSS positioning scheme (e.g., grid layout or flex box) and the ability to specify an arbitrary shape to constrain the inline content of any element, as well as the ability to specify a shape for exclusions and floats which ‘outside’ content should flow around.

Over the past several months, we have worked with our co-editor (Rossen Atanassov from Microsoft) on the CSS exclusions processing model and we also implemented it in WebKit. The processing model discusses the Exclusions part of the specification and it is the most difficult and most controversial part of the specification. By contrast, the Shapes part of the specification is a lot less controversial because it does not impact implementations as much.

The exclusions specification’s main issue characterized the CSS Exclusions and Shapes specification as being based on absolute positioning, which is incorrect. The latest draft clarified why there is no such dependency and updated several examples to make that more apparent. We got agreement to reword the issue to reflect the underlying concerns while not characterizing the specification incorrectly.

The group also requested to add a way to specify exclusions the same way backgrounds are specified. We may propose a way to make the exclusion defined by the background directly.

Web Animations

Brian Birtle at Mozilla has been leading the Web Animations effort with several others. The goal here is to harmonize the CSS Animations, the CSS Transitions and the SVG Animations models, syntax and API as much as possible.

Brian presented the current draft and the group provided feedback on the ability to serialize animations created through the API.

This is a great effort and Dmitry Baranovskiy, who recently started in our Web Platform team at Adobe, will work closely with Brian and the other contributors to this important effort. It is important, because it should bring a unified way of declaring, serializing and manipulating animations in CSS and SVG alike. While doing so, it will also plug some gaps (e.g., the lack of animation synchronization in CSS animations).

A fruitful meeting and next steps

We felt this was a very fruitful meeting and the next steps we are going to focus on over the next few months are:

  • CSS transforms – we will keep working with the group and the other editors on resolving the remaining issues, strengthen the test suite and bring the recommendation to Last Call status. This is an important step towards making this recommendation final which will ultimately allow us to remove prefixes on the much-used transform property.
  • CSS compositing and blending – together with our co-editor, we’ll focus on bringing this draft to First Published Working Draft status. There were a number of requests made to the editors which will have to be addressed before the FPWD happens.
  • CSS Filters – we’ll work with Dean Jackson (Apple) and Erik Dahlstrom (Opera) on prepping the FPWD. My work will focus on the security section of the specification and the integration of CSS shaders in the CSS filters draft.
  • CSS Regions – as described here, our focus is going to be on the box generation. We’ll work on a proposal, collaborate with Opera on the overflow:repeat proposal they’ll put forward and integrate that work with the CSS regions draft.
  • CSS Exclusions – we are keen on refining this specification and getting the prototype features in the hands of developers. So we will work on improving the draft specification and continue our contributions to WebKit for this feature.

3 Comments

  1. May 30, 2012 at 7:00 am, kidakaka said:

    These sound exciting, hitherto I was unaware of how much Adobe is contributing to the web. Good going folks!

    When would these CSS features be available for mainstream adoption?

    • May 30, 2012 at 2:53 pm, vhardy said:

      We are working on all the features discussed in the blog in the WebKit engine and we are looking into compositing in Firefox as well. Giving a timeline for mainstream adoption is difficult because of the open source nature of the contributions and the standardization process. However, given the progress made in the past year, I hope several features (in particular transforms, regions and shaders) will see adoption sooner than later.

  2. June 21, 2012 at 3:40 am, CSS Webstandard Blog said:

    I really like the idea of “CSS Regions”, but there exist not enough browser-support for this feature. CSS Animations &Transitions are already part of my daily work and I hope “CSS Regions” too ;o)