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!

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 »

Our competition has now closed and it’s time to announce the winners, each winning a digital copy of SitePoint’s latest book – The CSS3 Anthology: Take Your Sites to New Heights by Rachel Andrew.

We’ve teamed up with SitePoint to give you the chance to win one of five free digital copies of their latest book – The CSS3 Anthology: Take Your Sites to New Heights by Rachel Andrew.

This competition has now closed!

CSS3 Transitions are a presentational effect which allow property changes in CSS values, such as those that may be defined to occur on :hover or :focus, to occur smoothly over a specified duration – rather than happening instantaneously as is the normal behaviour.

Transition effects can be applied to a wide variety of CSS properties, including background-color, width, height, opacity, and many more. Keep reading for further details of supported properties.

Read the complete article in our CSS3 Preview section »