CSS3

The CSS Working Group has reached an impasse on the issue of percentage margins (and padding) in flex and grid layout, and needs your input to help decide it.

Option 1: Flex and grid items resolve percentages in margin-top and margin-bottom against the height of the element’s containing block.

Option 2: Flex and grid items resolve percentages in margin-top and margin-bottom against the width of the element’s containing block.

Option 1 makes vertical margins consistent with horizontal margins (which resolve percentages against the width of the element’s containing block). This is a theoretically simpler model, and works well with Flexbox and Grid’s dimension-agnostic layout concepts. However, it is inconsistent with CSS block layout, and causes the margins to collapse to zero when used in an auto-height container.

Option 2 is consistent with the behavior of vertical margins in block and table layout. It has usable behavior in auto-height boxes, and enables the “aspect ratio hack”. However, it is a less obvious behavior, and means the layout interactions change based on whether a flexbox is “row” or “column”.

(For more background, see discussion on www-style.)

We’re looking for comments from authors explaining which behavior they think is better for Flex and Grid layout, and why. Do you have use-cases that can only be achieved with one behavior or the other? Show us!

The CSSWG has published an updated Working Draft of CSS Box Alignment Level 3. This module extends the Flexbox alignment properties to apply to all layout models and adds additional controls for logical positioning, space distribution, and handling overflowing elements.

This is the vertical centering module, people.

This module’s syntax and functionality is in the process of stabilizing now and we need your feedback. Think of all the cool things you could do with the new alignment properties! Imagine them! Examine them! Make examples! Write rants! And tell us what is awesome and what is stupid so that we can fix it to be better before it gets locked down in shipped browsers.

Changes since the last Working Draft are listed in the Changes section.

Please send feedback! Comment here, post to the (archived) public mailing list [email protected] with the spec code ([css-align]) and your comment topic in the subject line, write a blog post and send us a link, or, if you’re shy, email one of the editors directly. Ranting somewhere else in the ether and expecting us to find it by magic, however, won’t work.

The CSS Working Group has published an updated Working Draft of CSS Grid Layout. This CSS module defines a two-dimensional grid-based layout system optimized for user interface design.

This is publication is a major update: not only has the draft generally been reorganized and much of the prose rewritten to fill in missing details, avoid repetition, improve precision and terminology, and ensure alignment with Flexbox, but it’s switched to a new positioning model. The old grid layout model uses properties to indicate the starting row/column and the item’s span. The new grid layout model positions each edge of the item to a grid line.

The W3C this month, on 14th August 2012, released an updated working draft of the CSS3 Text Module.

The updated working draft includes several changes from the previous version, published in January 2012. Keep reading for further details.

The CSS3 Media Queries module was released as an official W3C Recommendation on 19 June 2012, marking the end of a development cycle that began over ten years ago (the first working draft of the specification was published on 4 April 2001).

Last month Microsoft announced that they now support (via their IE10 release preview) CSS3 Animations, Transforms and Transitions without the need for vendor prefixes, becoming the first browser to do so.

Tab Atkins and I published an updated Working Draft of CSS Image Values and Replaced Content Level 3 this month. We anticipate that this will be the last draft before Last Call, which we aim to publish in January. If you have an interest in this draft, please review it and send in your comments.

We’ve got a bit of a tricky question on expected behavior of multi-column layout for you folks.

This is cross-posted from the CSSWG Blog.

At the CSSWG F2F last week, I raised the issue that the radial gradients we were discussing were unreadable to me, and probably therefore to much of the intended audience. It was not at all obvious by looking at the gradient syntax what the various numbers and lengths might be.

radial-gradient(60% 43%, 25px 25px, #b03 99%, transparent)

So Tab Atkins, David Baron, Brad Kemper, Brian Manthos and I hashed out an alternative syntax.

radial-gradient(circle to 25px at 60% 43%, #b03 99%, transparent)

We’d like your opinion on which is preferred and why.

The CSS3 Selectors module and CSS3 Namespaces module have both been released as official W3C recommendations, becoming the second and third CSS3 modules, respectively, to reach the end of the development cycle, following on from the release of the CSS3 Color module as a W3C recommendation earlier this year.