CSS3

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.

There are tons of issues marked in the draft, such as:

• What to do by default with items that aren’t positioned?
• Best way to indicate that the contents of an element should align the parent grid?
• Better names for various properties?
• Better syntax for defining the size of the rows/columns?

We’re totally looking for feedback, particularly on syntax issues, so please send comments to the (archived) public mailing list [email protected] with the spec code ([css-grid-layout]) and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.)

Comments are also enabled on this post (and over on the CSSWG blog). The editors strongly encourage feedback and suggestions for improvement from the design community!

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.

Hats off to the CSS Working Group, it must have been a busy few weeks. Not only have they released several updated specifications, most notably the long awaited publication of the CSS2.1 specification as an official W3C recommendation, but also introduced a major redesign of their home page.

The release of CSS2.1 as an official recommendation also paved the way for the CSS3 Color module to advance to the recommendation stage, becoming the first CSS3 specification to be released as an official W3C Recommendation.

Posting on behalf of Tab Atkins about an open spec issue:

I’ve been pretty adamant for some time that gradients should use the math-y interpretation of angles, where 0deg is East and 90deg is North. In addition to matching what you learn in school about polar coordinates, it matches what tools like Photoshop expose. Other members of the WG, though, have been equally adamant that we should more closely match existing language conventions, particularly that bigger angles mean clockwise rotation.

The strength of my conviction has eroded over time. It really is true that every other use of angles uses them to represent clockwise rotations. In SVG, angles are present in transforms and the glyph-orientation properties, while in CSS they’re present in transforms, image-orientation, and the azimuth and elevation aural properties. In all of them (save elevation, which rotates in a different axis), the rotation is clockwise.