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.

Although the Backgrounds and Borders Level 3 module has already reached the Candidate Recommendation stage of development several times in its lifespan, most recently in July 2012, the module has been updated again after implementation feedback identified the need for a few small changes.

Keep reading for the full list of changes in this version.

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.

Opera Software have announced that they are abandoning their proprietary Presto rendering engine in favour of the open source WebKit rendering engine, for future versions of their mobile and desktop web browsers.

The Japanese government is offering several grants for researching the problems of vertical text layout standardization on next generation web browsers. Each grant is worth ¥100,000 (about €790).

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.

The CSS3 Selectors module introduces three new attribute selectors, which are grouped together under the heading “Substring Matching Attribute Selectors”.

These new selectors are as follows:

[att^=val] – the “begins with” selector
[att$=val] – the “ends with” selector
[att*=val] – the “contains” selector

Read the complete updated article in our CSS3 Preview section »