Safari 4.0

The following new features have been added in Safari 4.0.

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.

Changed Methods

The following methods now have two possible forms:

  • console.error()


  • console.log()

  • console.warn()

The first, simpler form is as follows:

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

Each of the object* parameters is formatted as an object and appended to the output, separated by spaces.

The second form uses a printf-style format string to format the remaining parameters:

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

The formatString parameter specifies the format string, with the remaining (formatParameter*) parameters substituted in place of the format specifiers within it. The following format specifiers are supported:

%d or %i



Floating-point value with N digits of precision





If more parameters are given than the number of specifiers in the format string, the additional parameters are formatted as objects (%o) and appended to the output separated by spaces, as in the first form above.

New Methods

The following new methods have been added:

  • console.assert (in boolean condition, in Object object1, in Object object2, …)

    console.assert (in boolean condition, in DOMString formatString, in Object formatParameter1, in Object formatParameter2, …)

    • If condition is false, all of the object* or formatParameter* parameters are logged to the Web Inspector console as an error. The parameters are treated as described above under Changed Methods.

  • console.debug ()

    • Synonym for console.log().

  • console.profile (in DOMString title)

    • Starts recording a profile titled title.

  • console.profileEnd ([in DOMString title])

    • Stops recording the profile titled title. If no title is specified, the most recently started profile is stopped.

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:

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:

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:

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.