Nice post which presents some of the new features that will come with CSS 3.0 and the Safari support of them. In the original post you can find also some demos.
You see, even 3 months ago Safari 3.0 was far out in front of the other major browsers in implementing the incredibly cool features of CSS 3.0, the next generation of the W3C’s Cascading Style Sheets standard. But back in March, that implementation was buried in the open-source WebKit browser framework, which very few Mac users ever use directly, and in the alpha version of Safari 3.0, available only to a few thousand Mac OS X developers.
Suddenly, with last week’s announcement at the Apple developer conference, the latest, greatest, state-of-the-art WebKit framework, with its powerful CSS 3.0 tools, is available to over 95% of the public through the Safari public beta. That being the case, it’s clearly time to get to know the CSS 3.0 features a bit better.
And what features might those be? Well, without writing the whole article in this introduction, here’s a short list of the CSS 3.0 styles that I am most anxious to master:
1. Box-shadow: Yes! Add drop shadows through CSS!
2. Multi-column layout: Can we really do this now? With HTML?
4. Rounded corners: Any
can be made round.
5. Colors with transparency: There goes another ugly hack from way back!
6. Background image controls: Remember how great it was when you could add images as well as colors to an element’s background CSS style? Well, it’s about to get a whole lot better!
This article lists the CSS 3.0 features that are available today only in Safari 3.0 or the nightly WebKit browser. But I wasn’t content to just list them… I wanted to play around with them as well. So each feature is accompanied by a demo or two and some explanatory notes. Since some of the features are a bit complex, and almost totally lacking in documentation from either W3C (which only lists the standards, not the implementation details), Apple, or the WebKit team, I’ve had to experiment to discover what some of the attributes do.
Fortunately, a forward-thinking group of techno-weenies is keeping a close eye on the emerging details of the CSS 3.0 implementations, and they have done some experimenting of their own. Since they’re in the same boat I am (actually, they have a much better boat!), it’s not surprising that I’m finding ambiguities in the way they’ve built some of their demos. Still, it’s the closest thing to documentation that I’ve found, and I highly recommend that anyone interested in learning more about CSS 3.0 pay a visit to the terrific CSS3.info website. In fact, you’ll find links to their pages throughout this site.
Following CSS3.info’s lead, I’m organizing the (at this time) Safari-specific implementations into four categories: Borders, Background, Text Effects, and User Interface. These correspond to the W3C draft modules for CSS 3.0. The fifth tab in the navigation control below gathers the CSS 3.0 specifications that have been implemented by Safari and at least one other major browser. As you browse through these up-and-coming features, I think you’ll understand my excitement about the benefits they offer to web graphic- and user-interface designers.
Since it’s clear from doing one or two of these that it’s going to take me some time to demo all 7 of the Safari-only features, I’m going to start with what I’ve got today and leave placeholders for the rest. I’ll add the demos as time and energy permits. In the meantime, as mentioned before, do pay a visit to CSS3.info for their demos of each. I hope you’re inspired to take up a keyboard and pound out some experiments of your own!
Before I leave you to the demos, I’m sure some readers are wondering about my statement that Safari 3.0/WebKit is far in the lead in implementing CSS 3.0. Here then are the stats in case you’d like to keep score. Of the 19 CSS3 styles documented by CSS3.info as having been fully or partly implemented by at least one of the major browsers thus far, Safari has done 18 of them:
1. Safari: 18
2. Firefox: 9
3. Opera: 5
4. IE7: 0 (?)
Note: This is only counting browsers that have a publicly released version available, not those that have announced future plans.