JavaScript Performance

WebKit’s JavaScript engine, JavaScriptCore, features a new interpreter, code-named Nitro, which takes advantage of some of the latest research in the field of efficient virtual machines and is much faster than its predecessor.

Redesigned Web Inspector

The Safari Web Inspector has received a face-lift with an easier-to-use, task-based interface. See the Safari Web Inspector Guide for details.

Integrated JavaScript Debugger and Profiler

A JavaScript debugger has been added to the Web Inspector with the ability to step through code and set breakpoints in any page’s JavaScript. A JavaScript profiler has also been added to help you identify where execution time is spent in your JavaScript functions, allowing you to optimize your work time by focusing on the parts of the code most in need of optimization. See the Safari Web Inspector Guide for details.

Console Methods

WebKit has some new and changed console methods that improve functionality and compatibility.

void method (in Object object1, in Object object2, …)

void method (in DOMString formatString, in Object formatParameter1, in Object formatParameter2, …)

Transforms in JavaScript

You can now access and manipulate transforms in JavaScript. See the Safari CSS Visual Effects Guide for details.

Transitions and Animations in CSS and JavaScript

Transitions are implicit animations that occur when you change an animatable CSS property. Transition properties were available in Safari 3.2, but transition events are now available in JavaScript as well. You can also animate transforms (such as rotating, scaling, and translating elements) and use CSS animation properties to animate elements as they move, resize, change color and opacity, and undergo other visual changes. See the Safari CSS Visual Effects Guide for details.

Gradients, Masks, and Reflections in CSS

WebKit now supports gradients, masks, and reflections specified in CSS:

• A gradient is a visual effect you can apply to a surface, which gradually changes the fill color from one value to the next, creating a rainbow effect. Gradients are specified using the -webkit-gradient function and can be passed in place of an image URL parameter.

• A mask allows you to block out or obscure an area of an image before rendering it. The -webkit-mask and related CSS properties are analogous to the background and -webkit-border-image properties. You can set the mask’s origin, position, and size, and specify how it is used.

• A reflection is a mirror image with its own specific transform and mask. Use the -webkit-box-reflect property to set the direction, offset, and mask of an image’s reflection.

See the Safari CSS Visual Effects Guide for more information.

Canvases in CSS

WebKit now supports the ability to specify a named canvas in CSS and then draw in it programmatically from JavaScript. Wherever you can specify an image URL, you can instead specify a canvas and an identifier to use for that canvas as follows:

body {

    background: -webkit-canvas(mycanvas);

}

The following new DOM method can then be used to obtain a drawing context for the canvas:

CanvasRenderingContext getCSSCanvasContext (in DOMString contextType, in DOMString identifier, in long width, in long height)

All elements that observe a CSS canvas of the same identifier share the same canvas. This means that you can create animations with drawing changes happening in lockstep for all users of the canvas. See the -webkit-canvas function in the Safari CSS Reference for more information.

WebKit Availability Macros

WebKit now has availability macros corresponding to specific WebKit releases. These macros let you easily target specific releases of WebKit, much the way you do with OS X releases using the system’s availability macros. Because WebKit releases span multiple versions of OS X, the availability macros are defined in terms of WebKit version numbers rather than OS X system version numbers. There are two defines that you can add to your project to specify the WebKit versions it requires:

• WEBKIT_VERSION_MIN_REQUIRED denotes the earliest WebKit version required for your software to run. By default, it is set to the version of WebKit that originally shipped with the target system version (MAC_OS_X_VERSION_MIN_REQUIRED).

• WEBKIT_VERSION_MAX_ALLOWED denotes the latest WebKit version with which your software can work. By default, it is set to WEBKIT_VERSION_LATEST or WEBKIT_VERSION_MIN_REQUIRED, whichever is later.

Accessible Rich Internet Applications

WebKit now has elementary support for the W3C WAI-ARIA specification. One of ARIA’s most compelling features is the ability to assign a role to any element, based on the idea that in modern web applications, a <div> is not always just a <div>. The ARIA role attribute indicates the role that the element plays in the context of the page. See the Safari HTML Reference for a list of roles supported in Safari 4.0. Some roles have corresponding ARIA states to provide additional information required for that role. WebKit has support for the following states:

• aria-checked

• aria-level

• aria-pressed

• aria-valuemax

• aria-valuemin

• aria-valuenow

Here is an example of how to add ARIA role information to a <div> element containing a visual progress indication:

<div role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="10"></div>

WebKit now provides expanded facilities for assistive technology. The ARIA tabindex attribute enables keyboard navigation on any element, from which assistive technology focus naturally follows. The tabindex attribute and focus event on every element are introduced in the HTML5 Standard and find new support in WebKit. WebKit also supports the aria-activedescendant attribute, which provides an additional means of configuring assistive technology focus for any element.

Finally, WebKit supports the attributes aria-labelledby and aria-describedby, which allow you to explicitly set accessible names and accessible descriptions, respectively. For more information about building an accessible page using ARIA, see WAI-ARIA 1.0 Authoring Practices.

Cross-Site XML HTTP Requests

WebKit now has basic support for cross-site XML HTTP requests using W3C XMLHttpRequest Level 2 and W3C access control for cross-site requests. This provides a way for servers to specify that a cross-site request is allowed, by sending an Access-Control HTTP response header. See Using XMLHttpRequest Objects for more information.

HTML5 Cross-Document Messaging

WebKit now supports the HTML5 cross-document messaging standard, allowing documents served from different domains to communicate with each other directly without the need for server relaying. See Cross-Document Messaging for more information.

HTML5 Offline Applications

WebKit now supports the HTML5 offline web applications standard, allowing a web application to dictate which resources it needs, causing WebKit to download them and serve them locally from disk, as well as serve updates to the web application atomically. The Safari 4 Developer Preview does not yet support dynamic or opportunistically cached entries. See HTML5 Offline Application Cache for more information.

HTML5 Local and Session Storage

WebKit now supports the new HTML5 Storage interface, which provides two local key-value stores: a per-window store named sessionStorage and a per-host store named localStorage. It also provides event notification so that content in one frame can find out when content in another frame modifies the stored values.

Many pages are designed so that the user can carry out a single transaction, but users may sometimes perform multiple transactions at a time in multiple windows. When cookies are used to track the user’s activities, information leakage can occur that can result in unexpected behavior: for example, a user who is booking two different flights in two different windows might inadvertently purchase two tickets for the same flight. Such information leakage occurs because cookies are global and weren’t designed for this sort of client-side session tracking.

Per-window session storage, accessible from window.sessionStorage, solves the problem of tracking multiple transactions in multiple windows without the need to work around the limitations of cookies. Local storage, accessible from window.localStorage, provides the same simple interface but for global, persistent data. Any key-value pair stored in the local storage object persists on the client computer even when the client quits Safari. This provides a simple and persistent way to store user preferences, application settings, and even the user’s data locally on the user’s computer. See Key-Value Storage for more information.

HTML5 Canvas

WebKit now implements the HTML5 canvas pixel manipulation standard along with the toDataURL() method standard. These additions to Canvas allow you, for example, to implement advanced image filters directly in JavaScript. See WebKit DOM Programming Topics for more information.