CSS3

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.

Another new property introduced by the CSS3 Backgrounds and Borders module is background-size. The property adds new functionality to CSS allowing designers to specify the size of background images using either lengths, percentages, or by using one of two keywords; contain or cover.

Browser support has grown of late, with the current versions of most popular browsers now supporting background-size, including Firefox, Safari, Chrome, Internet Explorer and Opera, without the need for vendor prefixes.

Read the updated article in our CSS3 Preview section »

Back in March 2011 we reported that Think Vitamin were offering free access to their entire CSS3 Video Training Course for 24 hours only.

I’m pleased to announce that this week I received an email from Alan Johnson at Think Vitamin letting me know that once again they’ve decided to offer free access to the entire CSS3 Video Training Course, minus the Master Class project – which is only available to paid members. However, this time there is no 24 hour time limit, with the videos being available for ‘the foreseeable future’ – however long that may prove to be.

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.

Released on Friday 20th May 2011, Firefox 5 beta brings long awaited support for the CSS3 Animations module, released as a W3C working draft in March 2009, to Mozilla’s popular web browser.

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.

CSS3 allows web designers to specify multiple background images for box elements, using nothing more than a simple comma-separated list.

Browser support for multiple backgrounds is now relatively widespread with Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all implementing the feature.

Read the updated article in our CSS3 Preview section »