Looking back,This is an update to the article I wrote last summer, when Safari 3.0 was first released. In the 9 months since then, a lot has happened, and I wanted to try to keep this info up to date. Opera, iCab, Konqueror, and Firefox have all made progress in adopting CSS 3.0 specifications, the next generation of the W3C's Cascading Style Sheets standard.

However, the WebKit team continues to lead the pack, as they have since I first contemplated this article over a year ago. In the last 6 months, that team has not only adopted more of the CSS 3.0 specs ahead of the others, but they have proposed several exciting new specs of their own, which the W3C is taking up as draft recommendations.

In addition to updating the state of CSS 3.0 in WebKit/Safari, I've also added some new demos for the Backgrounds section.

Here are the CSS 3.0 features I wrote about in July 2007:

1. Box-shadow: Yes! Add drop shadows through CSS!
2. Multi-column layout: Can we really do this now? With HTML?
3. Resize: Give JavaScript hacks a rest and let users relax when typing input on web pages.
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!

And since then, WebKit and Safari 3.1 have adopted the following new ones:

1. Adopted last October, WebKit introduced its first take at CSS Transforms, which it has submitted to the W3C for consideration. With CSS Transforms, <DIV>s can be scaled, rotated, skewed and translated... all without using JavaScript!
2. Announced at the same time is the equally exciting implementation of CSS Animations. At the moment, the only type of animation that's documented and demonstrated on the WebKit blog is based on CSS Transitions, which let you define how an object or attribute changes over time from one state to another.
3. Also in October, WebKit added the CSS Web Fonts feature, which lets designers beam fonts to users through CSS and HTML, approximating the capabilities of PDF in a much lighter-weight form.
4. Then, after a lull, things started to heat up again last month, when Apple released Safari 3.1. Safari 3.1 incorporated all of the CSS 3.0 features WebKit had pioneered earlier, plus it added a bunch of things the WebKit team hadn't blogged about. Chief among these was support for CSS Attribute Selectors. This is something of a holy grail to advanced web developers, since it opens up a whole world of possibilities for using the Document Object Model (DOM) to build better web interfaces. When released, WebKit was the first and only browser to support this geeky, but highly practical feature.
5. And then, just today, WebKit added support for CSS Gradients to its portfolio. Gradients are not yet a CSS 3.0 specification, but they are part of the HTML 5.0 spec. No doubt Apple's implementation will be referred to the W3C for consideration.

Full article

A quiet revolution has taken place for Mac OS X Safari users, but I haven’t seen anyone celebrate it… and I’ve looked! There isn’t even a mention of this dramatic change in Safari’s powers on the Surfin’ Safari blog, where the open source team that’s evolving the WebKit rendering engine used in Safari announce new features and updates. Lately, this team has implemented a number of really amazing features from the CSS 3.0 specification, and each has been trumpeted with some eye-popping examples. But not a word about this.

Well, I for one am celebrating the upgrade with this article and proclaiming to the world that finally, at last, Safari is gaining parity with the other modern browsers in letting users perform WYSIWYG editing whenever the application calls for it. Mac users like me who have simply done without rich-text editing in their WordPress blogs and Gmails, bristling with an unfamiliar envy at the vast majority of users who take this functionality for granted by now, can finally save ourselves some typing and edit in our web browser with the same ease we do in a word processor.

Full article

Another day, another cool new WebKit-related application that made me stop what I was doing and take some screenshots! In this case, I also took a couple of home movies to demonstrate features that words may not quite do justice to. What am I talking about tonight? Much to my delight, I’m referring to the new public beta release of Shiira 2.0, an open source web browser based on Apple’s WebKit and its WebCore/JavaScriptCore framework.

Most of the folks who wander into this blog from a Mac OS X background have undoubtedly tried Shiira before. The project’s humble goal is “to create a browser that is better and more useful than Safari.” That goal has been elusive in the past, although Shiira 1.2 has certainly put WebKit through some powerful experiments and come up with a few features that Apple would do well to emulate (draggable tabs, anyone?). But mark my words… if the Shiira team finishes version 2.0 before Apple unveils Safari 3.0 next spring with the launch of Mac OS X 10.5 (”Leopard”), they will have accomplished their goal—at least for a little while.

This prediction is based on no more than an hour of browsing and tinkering with the as-yet-unfinished Shiira 2.0 beta release. I’m not going to go through a blow-by-blow of Shiira 2.0 here. (For that, check out this useful “visual preview” of Shiira 2.0.) Instead, I want to highlight a couple of the features that I think could very well lead me to switch from Safari to Shiira once the developers complete a few more of the missing functionalities (e.g., bookmark bar). In my opinion, this browser is that good.

Full article

Like many of you who develop on the Mac, I was amazed and very impressed by the WebKit team’s Web Inspector tool when it was unveiled in January. However, it was clearly not yet complete… two critical tabfulls of data were missing, which kept me turning to other tools—like the excellent Firebug for Firefox—when getting into a serious debugging session.

Well, tonight I was delighted to discover that the wait is over! On downloading a new build of WebKit today, I found that Web Inspector finally can provide those critical Metrics and Properties of each DOM element on my web pages. And boy, have they done a great job in the implementation! Every bit as cool and functional as the original bits, so I can now get all the details on any element of the page with a right-click of my mouse (control-click for some folks) and a simple selection of “Inspect Element.” Now come on Firebug fans, don’t you wish you could inspect an element that easily? Not that it’s hard with Firebug, but I always say, “Save a millisecond here and a millisecond there, and pretty soon you’ve saved a whole second!” (Just kidding… I never said that before.)

Full article