Posted by Maciej Stachowiak on Wednesday, November 14th, 2007 at 8:27 pm
Lately we’ve been talking about a lot of great new features in the latest development trunk of WebKit
- features like web fonts, client-side database storage, CSS transforms and CSS animation. These
features will likely make it to an official release someday. But I’d like to take a step back and talk
about some older features, namely all the great stuff in our recent stable release.
Apple’s site can tell you a lot about the new end-user features of Safari 3. But a lot of the goodness
is on the inside, in the WebKit engine that powers Safari. Here’s a list of ten of the most exciting
engine enhancements since the Safari 2 version of WebKit, with lots of details and demos. These
features are all included in the WebKit that comes with Safari 3 - you don’t have to download
nightlies or anything else to get them.
1. Enhanced Rich Text Editing
As you browse the web with a WebKit 3 based browser, you will get a complete and functional
rich text editing experience on the new read-write web. Here’s a sweet demo of our improved editing
support, just click the text and editing controls appear.
Specifically, we have worked together with developers of RTE libraries and applications to improve
compatibility. WebKit 3 fixes many bugs, and supports additional text editing features like links and
lists. We now have support from web applications like WordPress, Google Docs, GMail, Blogger,
and many more. We’ve also improved editing to support libraries like TinyMCE and FCKeditor. We
expect even more web apps and toolkits to add support over time.
of today’s rich web applications. You can see this on a number of benchmarks. To gather the results
below, I tested on a MacBook Pro (2 GHz Core Duo, 1 GB RAM). For the WebKit 2 results, I used Safari
2.0.4 on Mac OS X 10.4 Tiger. For the WebKit 3 results, I used Safari 3.0.4 on Mac OS X 10.5 Leopard.
3. Faster Page Loading
WebKit 3 also offers significantly improved raw page loading speed. Unfortunately it’s hard to find good benchmarks in this area. The best we know of is the HTML i-Bench which is a pain for the casual user to set up, but which is based on real web content.
Some have argued that page loading benchmarks are unfair because browsers dispatch the load before painting, and Safari will sometimes even do it before the first layout. But the HTML i-Bench is one of the few tests to factor this out - it forces a layout and scrolls to ensure a paint. Here’s the numbers: WebKit 2 - 2.95 sec WebKit 3 - 2.06 sec WebKit 3 is 1.4 times as fast!
In addition, independent researchers confirm that Safari 3’s page loading is really fast.
WebKit 3 features a major new technology - SVG (Scalable Vector Graphics). SVG is an XML markup language for graphics that allows rich interaction and which can be mixed directly with XHTML. Here’s some whizzy demos:
We haven’t profiled and optimized SVG quite as much as the rest of the engine, but early tests seem to indicate that it already has blazing performance. Look for this exciting new technology to see even more use on the web over time, now that it is supported by WebKit, the Gecko engine inside Firefox, and the Presto engine inside Opera.
Another major brand new technology in WebKit 3 is XPath, the XML Path Language. XPath is a W3C standard query language that lets web developers efficiently find particular elements in the document. Since XPath is a programming language, it’s hard to show a pretty demo, but this tutorial goes in depth and has a few examples. XPath is used in AJAX toolkits like TIBCO General Interface, and can be used by CSS query engines for improved performance, as in dojo.query.
6. New and Improved XML Technologies
In addition to the big new features of XPath and XVG, we have lots of new and improved XML technologies:
Proper support for named character references in XHTML.
Much more complete and compatible XMLHttpRequest, including support for event listeners, incremental updates for persistent server connections, parsing of more XML MIME types, support for more HTTP methods.
7. Styleable Form Controls
WebKit 3 introduces the ability to customize the look of form controls with CSS. We still use standard looking native form when no custom styles are applied, but we have the ability to customize the look to better support sites with a strong visual identity. Here’s a few simple examples:
<INPUT style="BORDER-RIGHT: #800080 1px solid; BORDER-TOP: #800080 1px solid; FONT-SIZE: 15px; BORDER-LEFT: #800080 1px solid; COLOR: #800080; BORDER-BOTTOM: #800080 1px solid; FONT-FAMILY: Verdana; BACKGROUND-COLOR: #bbbbff" value="Text field">
Here’s some older, more advanced examples for styleable text fields. On other sites, you can find demo pages for styling all sorts of form controls.
8. Advanced CSS Styling
We have added many advanced CSS features that let content authors make better-looking sites with less effort. These include experimental WebKit features or early implementations of CSS3. Here’s a quick demo of some of them (you’ll only see the fancy stuff with a WebKit 3 based browser):
Text-stroke and text-shadow
WebKit supports multiple columns. This is a test of multiple columns, so it should really lay out in two columns. Multi-column layout is a CSS3 module. And hey, as an added bonus, why not use text-stroke/fill (WebKit extensions) and text-shadow? Those make for a nice fancy heading. And while we’re at it, there’s also border-radius and box-shadow for box decorations.
Memory use is something that is notoriously hard to measure. The browser has many caches, and many sites on the live web server. The best way I could find to measure repeatably was by looking at memory use after running through the HTML i-Bench, but your results on other sites may vary. Here is what I saw: WebKit 2 - 26.7M RPRVT memory WebKit 3 - 23M RPRVT memory WebKit 3 uses 14% less memory!
Improving memory use will remain an important focus for future releases.
10. Web Developer Tools