CSS3

The CSS3 Module Status Table has been fully updated based on the latest information available from the W3C. From now on the table will be updated on a regular basis, as and when new information becomes available.

Note: Browser Compatibilty tables will be updated shortly.

Regards,
Chris

Dear Readers,

I am writing this article to introduce myself as the new owner of CSS3.info, having recently acquired the site from W3 Edge.

As a website, CSS3.info is a fantastic resource for the web standards and development community, which since it’s creation in 2006 has grown to be one of the most popular websites on CSS3 in the world. I am informed that in the past user feedback from CSS3.info has led to changes in the CSS3 specification, and I am keen to see the site continue to develop and serve the web design community, and retain it’s reputation within the industry.

Perhaps foreshadowed by Google’s adoption of HTML 5, Jeffrey Zeldman pointed out late last week; the future of XHTML 2 is no more. Obviously the selectors we use in CSS 3 depend on the underlying markup we work with, so this news is very interesting and we think timely. As CSS 3 support inches forward with each browser release and as JavaScript libraries supplement poor browser behavior, the need for web developers and enthusiasts to be able to focus their attention has become a paramount concern.

Earlier this year we asked if you still want more out of CSS 3 and we found that you did. Of late, we are seeing the dialogue rekindled time and again with great posts being written on other major blogs. Smashing Magazine contributor Inayaili de Leon provides code samples and insight on: using browser-specific properties, selectors, RBGA and opacity, multi-column layouts, multiple backgrounds, word wrap, text shadow. @font-face attribute, border radius, border image, box shadow and more. Definitely great work by de Leon, that also earned a mention from ajaxian. So check out the post and enjoy! Well done Inayaili!

If you want to get a taste of using the CSS 3 Template Layout module, Alex Deveria has written a jQuery plugin which implements the syntax.

I haven’t had the opportunity to try it out yet, so let me know how you get on.

So, the CSS Working Group is trying to wrap up the CSS3 Backgrounds and Borders Module and prepare it for Last Call. However, there are still some open issues we’d would like to get comments on.

Most of the open issues revolve around border-image. Brad Kemper knocked down several with his proposal and the CSS Working Group has adopted it in principle. (You can find it drafted into the latest unofficial Editor’s Draft on the W3C site.) We’re still ironing out the details on that, but there are a few others still open on border-image:

First Issue: Several people have commented that they would like a way to clip out the center part of the image. There are two options for this: A) Keep the middle part by default (current behavior). Add an empty keyword that clips out the middle part. B) Make the middle part clip out by default. Add a fill keyword that keeps it. (It’s needed for stretch-tiling things like aqua buttons.) Of course we might also just keep the current solution, C) have authors make that part of the image transparent. Comments? What would you use?

Second Issue: The syntax is particularly arcane. One commenter suggested breaking up border-image into multiple properties, leaving border-image itself as a shorthand. For example,

border-image: url(...) 20% 40% / 10% 4em 20% / 0 1em;

would be equivalent to

border-image-source: url(...);
border-image-slice: 20% 40%;
border-image-widths: 10% 4em 20%;
border-image-outset: 0 1em;

This would also allow the values to cascade independently, making it easy to e.g. swap just the image. There’s an overhead cost to more properties, however, so if we do this there needs to be a significant and useful advantage. Thoughts on this idea, or any other ideas for making border-image easier to understand?

Third Issue: There’s still an open question of how border-image should interact with box-shadow. The two proposals on the table are: 1.) Ignore box-shadow when border-image is in effect. (The author can draw the shadow directly in the border-image.) 2.) Use the border-image as a mask to draw a shadow, but only draw the shadow where it appears outside the padding edge (inner border edge). Comments? Preferences?

Fourth Issue: The next topic is fallback colors: the current draft has a feature that lets you specify a background color to use only if the bottommost background image fails to load. The WG wants to know, is this feature something authors really want? Several WG members have posted comments saying that it’s too hard to understand, that it’s not useful, and that the proposed syntax doesn’t make sense. What do you think?

Fifth Issue: The last issue is, the current draft specifies a background-clip: no-clip feature that lets a background image spill out of the border box. Implementors are concerned that it’s tricky to implement, and aren’t convinced that it would be useful. If this is something you want, show off a realistic example or two that demonstrates why it is needed.

Off-topic Issue: While I’m here, the WG wanted me to ask what people thought of renaming the block-progression property to block-flow or block-direction and whether either was more understandable (or if anyone had better ideas). The property changes the direction of block layout, and the values are tb (horizontal lines stacked top-to-bottom, like English text), rl (vertical lines stacked right-to-left, like traditional Chinese text), and lr (vertical lines stacked left-to-right). This is for vertical text layout, btw; it’s different from graphical rotation. See pages 2-5 of UTN 22 (PDF/HTML+SVG) for a definition.

P.S. Could someone please fix the css3.info style sheet so it doesn’t effectively eat list markup? Thanks.

The CSS Working Group had a face-to-face meeting in Tokyo last month and made a series of resolutions (which can be found on their blog). Most are fine technical points, but one of the more interesting is that the multi-column layout module is about to be reissued as a ‘last call’ document; after this, the module will be released as a candidate recommendation, meaning the authors are satisfied that the standard does what is needed of it, and will call for implementation.

As you may know, Webkit browsers (Safari, Chrome, etc) already support multi-column declarations (with a -webkit- prefix) and Gecko browsers (Firefox, Camino, etc) partially support it (with a -moz- prefix) – and fuller support will be forthcoming in Firefox 3.5. With those implementations in place, I’m hopeful that it will pass quickly through the recommendation process and become a standard.

Last week saw another layout proposal, the template layout module, reissued as an updated working draft. Previously known as the advanced layout module (and featured in our article How We’ll Lay Out Websites in 2016).

As a quick reminder, template layouts allow you to assign content to ‘slots’, which can then be laid out by declaring a grid using alphabetical characters. The following code would set up a two row grid, with the top row spanning the three individual columns of the bottom row:

body {
display:
'aaa'
'bcd';
}

You could then match elements to each slot by using pre-existing selectors and the position attribute:

div#div1 { position: a; }
div#div2 { position: b; }

And also use the new slot pseudo-class to apply styles:

body::slot(a) { border: 1px solid; }

This is probably the most radical proposal since the CSS standard was first created, allowing for very flexible template layouts, and I’m quite excited about it. However, it currently has no implementation, so is doubtless a long way off. Perhaps my satirical date of 2016 is not too wide of the mark after all.

The W3C have announced the creation of four new modules for CSS Level 3. The modules add entirely new functionality and do not extend any previous CSS Level 1 or Level 2 functionality. They are based on proposals from Apple’s WebKit team, and the current drafts are available from the following URLs:

• http://www.w3.org/TR/css3-animations/
• http://www.w3.org/TR/css3-transitions/
• http://www.w3.org/TR/css3-2d-transforms/
• http://www.w3.org/TR/css3-3d-transforms/

The new modules are all in Working Draft status at present, and are going to be developed in unison with related SVG technologies.

An interesting implementation has recently made its way into the latest Webkit nightlies – a detailed method of styling scrollbars using a combination of new pseudo-elements and pseudo-classes.

Example

Although the new syntax can seem complicated at first, Webkits implementation gives authors the ability to completely alter the look and feel of scrollbars of overflow sections, listboxes, dropdown menus & textareas, and when used in conjunction with border-image and multiple backgrounds, the results can look beautiful.

Whitepaper gives more details on the implementation.

Believe it or not there still a lot of discussion around CSS 3. The concerns among designers/developers vary widely and we’ve found that our visitors use CSS3.info in many different ways.

1. General questions about your CSS 3,
2. Research for future-proofing your projects,
3. Browser support issues and updates,
4. Tutorials and how to’s on CSS 3 features,
5. Goings on in the CSS world

So there’s quite a range of information that we can get into and provide, but we would like some feedback from our readers so that we can continue to make the site a helpful resource.

If you’ve done extensive work with CSS3, feel free to let us know via the contact form and perhaps you can provide us with a tutorial or review that we can feature on the site!

Leave us a reply in the comments below and let us know what types of information you’d like to see us providing this year.