CSS3

I don’t have time at the moment to write a good summary, but the link to the announcement is below which includes some examples

CSS Gradients in Webkit

Yesterday Dave announced that the team have introduced a new proprietary value for the CSS3 ‘background-clip’ property.The new value “…causes the background image to clip to foreground text (including decorations and shadows). The shape of the foreground content (including alpha transparency in the content) is applied as a mask to clip background drawing for the box.”

I have come up with a few examples that show the new value being used in several different scenarios:-

• Background clips to text (Screenshot)
• Background clips to text (with text-shadow applied) (Screenshot)
• Background clips to text-stroke (Screenshot)
• Background clips to text-stroke (with text-decoration applied) (Screenshot)

Needless to say that you need to download the latest nightly to view the live examples. I have also included screenshots of each example (background image is a subtle vertical gradient).

While browsing the admin section of this site, I saw an incoming link titled Fun with CSS3. It includes three examples of creating a recipe card mock up using CSS3 that is currently implemented in browsers. Due to the various levels of implementation, no browser can create the whole design using the CSS3 techniques, which is why it was split in three parts.

Because no single browser supports all the innovations in CSS3, I’ve split the Recipe Card page into several examples, each with unique markup. No point in looking at these in IE or Firefox – fire up the latest Safari or Opera instead.

I’m looking forward to a time when examples like this can be displayed fully by one browser. As for improvements to the examples, I’d like to see the heading images replaced with Web Fonts, and the images in the footer should be trivial to turn into SVG and added using list-style-image. The most difficult parts would be the effect the main title has inside the text (a transparent background image should be able to make this work) and the rotated main menu text. There is currently no way to rotate text in CSS. The example is making me hungry though.

Using a different approach, there are also some nice CSS3 examples on the CSS section of Dev Opera show casing what can be done with CSS today using progressive enhancement.

Do you know of any nice CSS3 demo, or have you created your own? If so share them in the comments. I’d love to see them.

Generated content via the content property has been available since CSS2. However this was only available using the :before or :after pseudo-classes. In CSS3 this support has been expanded to be useable on any element, without needing to use these pseudo-classes. Unfortunately this only works in Opera 9 (and above) at the time of writing.

I use this capability in my iTunes interface demo that I’m currently building to show off how powerful current and future web standards are for building application interfaces. This currently isn’t finished yet, and is very buggy (no min-width, missing features, no scrolling on the source list, content jumps, and no actual music support to name but a few). but you can take a sneak peak here. Due to MyOpera hot linking restrictions, you’ll need to press enter (or return) in the URL field to reload the page. This currently only works in Opera Kestrel due to missing standards support in other browsers, so download the latest weekly before trying it out.

The content property is used here so that the buttons and the playing column on the song list can contain their text labels. This is important for accessibility and if the page is styled differently and the design requires text instead of icons. The text is then set to empty using content: ""; for the relevant element. I’m sure there is a more cross-browser way of doing this, but the site is a demo so advanced properties and technologies were chosen to showcase them. To complete the buttons, and other parts of the interface, a SVG background was used. I plan to add border-radius to make the view buttons, and the head and footer of the interface have rounded corners. The screen needs to use SVG as the border uses a gradient to add the perception of depth. I suppose a border image can be used, but I like this approach. Other CSS3 properties used include overflow-y (The Genre, Artist and Album lists, and eventually the song list table), text-shadow (many of the headings), and CSS3 selectors (the song list and the button buttons). Other advanced technology used include SVG and HTML5 (getElementsByClassName).

Slides from Jina Bolton‘s presentation at FoWD 2007, CSS3 And What Could Be [PDF, 3.2MB], are now available to download from her website Creating Sexy Stylesheets.

There won’t be a lot of revelatory information in there for regular readers of this site, or those otherwise clued up on CSS3, but there are some nice practical examples to take a look at, particularly of the Advanced Layout and Grid Positioning modules.

The Webkit team have certainly been busy recently; since we mentioned the introduction of web fonts, they’ve also implemented transformations and animations.

Transformations, via the -webkit-transform property, allow you to scale, rotate and skew block elements; reader Ain Tohvri has put together an impressive test suite. At the moment this property doesn’t affect layout, so behaves more like a relatively positioned element.

Animation, which uses the -webkit-transition family of properties, allows you to set timings for fades, rotation, expansion, collapses, and more. They work in the same way as many current JavaScript libraries.

I’m in two minds about this; while it’s always welcome to see more innovation from browser manufacturers, I can’t help but think that they’re focussing their energies in the wrong direction. As I mentioned above, all of the above effects can be replicated with JavaScript libraries, and I don’t think that CSS should be used for controlling behaviour so explicitly. Users who don’t like to see animated pages currently have the option of disabling scripts, but they won’t have the option of disabling CSS in the same way.

Also, IMHO, there are a more pressing areas of CSS that need investigating; the Advanced Layout or Grid Layout modules are more important to the future of CSS than animations and transformations.

On the positive side, the Webkit team have promised to release technical documents which explain the proposed spec in detail.

If these new features float your boat, you can test them out by downloading the latest Webkit nightlies.

As we mentioned at the end of last month, the W3C have released a working draft of their first annual snapshot. The snapshots are intended to show which specs are stable enough to be considered part of the current state CSS.

The 2007 snapshot is:

• CSS Level 2 Revision 1
• Selectors Level 3
• CSS Namespaces
• CSS Color Level 3

The browser with the least support for the snapshot is, as you’ve probably already guessed, Internet Explorer. Opera has implemented all of the new selectors, but doesn’t yet have support for RGBA & HSL/A colours, which both the forthcoming Safari 3 (Webkit) and Firefox 3 (Gecko 1.9) have implemented. FF3 doesn’t do well with many of the new selectors, however, which Safari does.

While it would be nice to have included text effects and backgrounds & borders in this snapshot, differing browser implementations means they’re just not ready yet.

Even if this working draft becomes a recommendation shortly, no current or imminent browser fully supports the modules contained within; and with Firefox 3, Safari 3, and Opera 9.5 due for release over the next few months, it’s not impossible that none will do so until the latter half of next year. It could even be the case that IE.Next swoops in to beat the others!

With the CSS Eleven set to provide feedback to the W3C over the next few months, the 2008 snapshot could be a little more adventurous than that of 2007.

Here at css3.info we have a limited amount of resources, yet I’d like to push this site a little further then it’s already going, so I’m hoping you guys out there can help us out! What we need, are test cases for the different modules. The first that comes to mind, or actually was a request of Eric Seidel, Webkit developer: multi-column layout testcases.

Our current preview page doesn’t match the last version of the module, and browsers like Safari 3 are catching up, so we need more tests of it! If you make a testcase which we publish you will of course receive full credit for it in the footer of such a testcase.

Kornel mailed me today with an addition to the text-shadow preview page, that looks quite good :). He noted that the Safari implementation of text-shadow is a bit poor, as it supports only one shadow, and they are offset wrong by 1px. Thanks Kornel!

If you have any additions or new preview pages, feel free to contact us!

The CSS Working Group recently met face-to-face in Beijing, and have released a series of notes about some of the issues they discussed regarding the current and future states of CSS.

One interesting possibility that was raised is to allow rotation of page elements; according to the original proposal, these are some of the possible use cases:

1. rotate a block of text 90 degrees as for a tab on left of page
2. rotate an image (or block of text) an arbitrary amount
3. use rotated column headings for narrow table columns

It must be stressed that this exists purely as an idea at the moment, so we won’t be seeing it any time soon. Still, it would create many new possibilities in web design.

Following our discussion of the inherent ambiguity in the border-radius declaration, it has been decided that the simpler syntax used by Mozilla will used for the shorthand; that is, in order to apply elliptical corners on elements, you will have to declare them all separately. I think this is a good decision, and I’m delighted that the CSSWG have listened to the views of the community. A pat on the back for everyone involved!

Finally, the CSSWG are to release an annual(?) snapshot of modules considered stable, in order that browser makers and developers can begin to implement them. The 2007 snapshot will include:

• CSS2.1
• Selectors
• CSS3 Color
• CSS Namespaces

The 2008 version is likely to include Paged Media and Media Queries, and possibly Ruby and Backgrounds and Borders.

So that’s the state of CSS today. Interesting stuff; many thanks to the CSSWG for making it all public.