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.info()
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:
| Integer |
| Floating-point value with N digits of precision |
| Object |
| String |
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
isfalse
, all of theobject*
orformatParameter*
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:
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 thebackground
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 toWEBKIT_VERSION_LATEST
orWEBKIT_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.
Copyright © 2018 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2018-02-22