CSS3

Over the course of the last two weeks, the W3C CSS Working Group have issued three updated CSS3 specifications. The first sees the CSS3 Backgrounds and Borders module return to candidate recommendation, with the second and third providing updated working drafts of the CSS3 Text and CSS3 Image Values and Replaced Content modules respectively.

The working group also introduced a new module, CSS3 Writing Modes, just over 2 weeks ago on the 1st February. This recent flurry of activity represents the first major updates to the CSS3 specifications since the CSS3 Color module was released as a proposed recommendation in October last year.

Let’s take a look at what’s new. 

Backgrounds and Borders

The CSS3 Backgrounds and Borders specification first reached candidate recommendation in December 2009, however reverted to a last call working draft in June 2010 in order to introduce several changes:

• Addition of ‘content-box’ value of ‘background-clip’.
• Change to the ‘background’ shorthand syntax for ‘background-clip’ and ‘background-origin’.
• Removal of recommendation to use gradients for color transitions when ‘border-radius’ produces a curve.
• (Re)Addition of ‘box-shadow’ property.
• Various clarifications.

It is worth noting that whilst the ‘box-shadow’ property now appears to be safe, having seen a number of new implementations after being dropped from the last candidate recommendation issue, the ‘box-decoration-break‘ property is still at risk of being dropped if there are not enough implementations by end of the candidate recommendation period, given as 15 May 2011 at the earliest. At present Opera is the only browser to have implemented the property.

You can view the updated candidate recommendation, released on 15th February 2011, here.

Text

The updated working draft of the CSS3 Text module, also released on 15th February 2011, introduces many changes from the previous release, October 2010, including:

• Updated line break transformation rules to use East Asian Width property, consistent with behavior in MSIE.
• Moved ‘keep-all’ value of ‘line-break’ back to ‘word-break’ and adjusted explanation of properties to match this split.
• Added ‘keep-words’ value to ‘word-break’.
• Renamed ‘newspaper’ value of ‘line-break’ to ‘loose’.
• Copied hyphenation controls over from CSS3 Generated Content for Paged Media Module and updated with feedback from TPAC and Oslo F2F.
• Renamed ‘suppress’ value of ‘text-wrap’ to ‘avoid’ to be consistent with ‘page-break-inside’, which has similar behavior.
• Added more details to behavior of ‘text-align’ with <string> values.
• Added ‘text-align-first’.
• Added ‘auto’ value to ‘text-align-last’.
• Added ‘none’ value ot ‘text-justify’.
• Reorganized values of ‘punctuation-trim’ and renamed to ‘text-trim’.
• Removed ‘trim’ keyword of ‘text-justify’ to control it through ‘text-trim’.
• Removed ‘ideograph-space’ and ‘ideograph-parenthesis’ values of ‘text-autospace’.
• Changed definitions of ideographic letters, non-ideographic letters, and non-ideographic numerals for ‘text-autospace’.
• Changed values of ‘text-emphasis-position’ and ‘text-underline-position’ to allow specifying common combinations of horizontal and vertical positions.
• Changed preferred value of ‘text-emphasis-position’ for Chinese (Traditional).
• Removed definition of the ‘text-overflow’ property, which has been moved to [CSS3UI].

According to a post on the working group blog:

With the addition of the hyphenation properties pulled from CSS3 GCPM, this draft is now solidly in the refining stage. Feedback is welcomed, especially from the Southeast Asian, South Asian, and Arabic script communities, from whom feedback has been noticeably lacking thus far.

You can view the updated specification here.

Image Values and Replaced Content

With the release of this updated working draft, on 17th February 2011, the Images Value and Replaced Content specification has received a major overhaul along with a new name, the module was formerly called ‘Image Values’. The new name is a result of several replaced-element manipulating properties being pulled into the specification from the CSS3 Generated Content for Page Media and CSS3 Paged Media modules.

Aside from this, the most noticeable update is the inclusion of CSS3 gradients. CSS3 gradients were first introduced by Webkit back in 2008 and have been implemented by Webkit and Mozilla for some time, however this is their first inclusion in a CSS3 specification. The gradients syntax has been simplified, for ease of use, prior to inclusion in this specification, see this article on the Surfin’ Safari blog for more information.

Additional new features include:

• Addition of ‘object-fit‘ and ‘object-position‘ properties.
• Addition of ‘image-rendering‘ property.
• Addition of the ‘element()‘ notation.
• Addition of the ‘cross-fade()‘ notation.

According to a post on the working group blog:

This long-overdue update to the /TR page includes CSS gradients, and has also pulled in the various replaced-element manipulating properties from CSS3 GCPM and CSS3 Paged Media. Feedback is welcome on all aspects, but particularly on the gradients syntax.

Writing Modes

This month saw the addition of a new module to CSS3, CSS Writing Modes Module Level 3, originally due to be named ‘Text Layout’. In actual fact, the first working draft of the new module was published on 2nd December 2010, however no official announcement was made by the working group until the specification was updated on 1st February 2011.

The CSS3 Writing Modes module defines several new properties which, together, add support for various international writing modes, including left-to-right, right-to-left, bidirectional and vertical. The new properties are as follows:

• The ‘writing-mode‘ property
• The ‘text-orientation‘ property
• The ‘unicode-bidi‘ property (updated from CSS2.1)

The specification, still in the early stages of development, offers the following explanation of writing modes:

A writing mode in CSS is determined by the ‘writing-mode’, ‘direction’, and ‘text-orientation’ properties. It is defined primarily in terms of its inline base direction and block flow direction:

The inline base direction is the primary direction in which content is ordered on a line and defines on which sides the “start” and “end” of a line are. The ‘direction’ property specifies the inline base direction of an element and, together with the ‘unicode-bidi’ property and the inherent directionality of any text content, determines the ordering of inline-level content within a line.

The block flow direction is the direction in which block-level boxes stack and the direction in which line boxes stack within a block container. The ‘writing-mode’ property determines the block flow direction.

A horizontal writing mode is one with horizontal lines of text, i.e. a downward or upward block flow. A vertical writing mode is one with vertical lines of text, i.e. a leftward or rightward block flow.

Further details, including an explanatory diagram of writing modes, can be found in the specification here.