1. technology and computing
2. programming languages
3. javascript

What's New in Safari
Contents
Introduction to “What’s New in Safari” 6
Prerequisites 6
See Also 6
Safari 9.0 8
Secure Extension Distribution 8
Force Touch Trackpad Mouse Events 8
Content Blocking Safari Extensions 9
iOS 9
OS X 10
Shared Links 11
HTML5 Media 12
AirPlay 12
Picture in Picture Support 12
SFSafariViewController for iOS 13
Icons for Pinned Tabs 13
CSS Scroll Snapping 13
Backdrop Filters 14
Responsive Design Mode 16
Web Inspector Redesign 16
ECMAScript 6 Enhancements 17
Unprefixed CSS Properties 18
Safari 8.0 20
Quick Website Search 20
Safari 7.1 21
UI Minimization 21
Safari 7.0 22
New Layout Models 22
Columns and Pagination 22
CSS Regions 24
Flexible Boxes 25
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
2
Contents
Media Features 26
AirPlay API 26
WebVTT Enhancements 27
Font Enhancements 27
Dynamic Type 28
Kerning and Ligatures 28
CSS Enhancements 28
CSS calc() Function 28
Clipping Paths 29
Sticky Scrolling 29
Graphics Enhancements 29
Blending Modes 29
Path Object 30
Retina Backing Store 30
New Power-Saving Features 31
Application Napping for Safari Tabs 31
Page Visibility Detection 32
Safari 6.0 33
Web Audio API 33
HTML5 Media Controllers 33
HTML5 Timed Text Tracks 33
CSS Filters 33
SVG Filters 35
Redesigned Web Inspector 35
Safari 4.0 36
JavaScript Performance 36
Redesigned Web Inspector 36
Integrated JavaScript Debugger and Profiler 36
Console Methods 36
Changed Methods 37
New Methods 38
Transforms in JavaScript 38
Transitions and Animations in CSS and JavaScript 38
Gradients, Masks, and Reflections in CSS 39
Canvases in CSS 39
WebKit Availability Macros 40
Accessible Rich Internet Applications 40
Cross-Site XML HTTP Requests 41
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
3
Contents
HTML5 Cross-Document Messaging 41
HTML5 Offline Applications 41
HTML5 Local and Session Storage 41
HTML5 Canvas 42
Document Revision History 43
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
4
Figures and Listings
Safari 9.0 8
Figure 1
Figure 2
Figure 3
Figure 4
Listing 1
Listing 2
Listing 3
Listing 4
Safari Extension Builder 10
Overlay with a backdrop-filter 15
A Responsive Design Mode window 16
Web Inspector displaying rendering frames 17
Actions and triggers example 9
Creating Shared Links in OS X 11
Custom controls for Airplay 12
Activating PiP when clicked 12
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
5
Introduction to “What’s New in Safari”
Important: This is a preliminary document for an API or technology in development. Apple is supplying
this information to help you plan for the adoption of the technologies and programming interfaces described
herein for use on Apple-branded products. This information is subject to change, and software implemented
according to this document should be tested with final operating system software and final documentation.
Newer versions of this document may be provided with future betas of the API or technology.
This document summarizes changes to the Safari Web browser since version 4.0. Changes are presented
cumulatively in reverse chronological order, from later to earlier versions of the software. The document will
be updated continuously over time to reflect new software releases.
These are the main websites where you can obtain Safari development support:
●
developer.apple.com: The best source of official up-to-date technical documentation on iOS, OS X, and
Safari development
●
developer.apple.com/devcenter/safari: The Safari Dev Center homepage on the Apple Developer website
●
devforums.apple.com/community/safari: A dedicated Apple Developer Forum for Safari and web
development
●
www.webkit.org: The main homepage of the WebKit Open Source Project
Use bugreport.apple.com or bugs.webkit.org to communicate issues with Apple. Include detailed information
about the issue, including the system and developer tools version information, and any relevant crash logs or
console messages.
Prerequisites
To make best use of this document, you should already be familiar with Safari web development, HTML, CSS,
and JavaScript.
See Also
The ADC Reference Library contains a variety of other resources for Safari web content developers:
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
6
Introduction to “What’s New in Safari”
See Also
●
Safari Web Content Guide —Developing web content for Safari that is compatible with, optimized for, and
customized for any platform
●
Safari HTML Reference —HTML elements and attributes supported in Safari
●
Safari CSS Reference —CSS properties and classes supported in Safari
●
Safari DOM Additions Reference —Events and other JavaScript additions specific to Safari
●
Safari HTML5 Audio and Video Guide —Embedding audio and video in your web pages
●
Safari HTML5 Canvas Guide —Adding sophisticated animation and interactive games to a website
●
Safari Extensions Development Guide —Developing extensions to add features to the Safari browser
●
Safari Extensions Reference —JavaScript classes, methods, and properties specific to Safari extensions
●
Safari Web Inspector Guide —Using Safari’s built-in tools for debugging and optimization
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
7
Safari 9.0
The following new features have been added in Safari 9.0.
Secure Extension Distribution
Secure Extensions Distribution introduces improved security for Safari on OS X. All extensions in the Safari
Extensions Gallery are now hosted and signed by Apple. Users can trust that the Safari Extension they install
is the one you submitted.
Only Safari Extensions installed from the Safari Extensions Gallery can be updated automatically. Add the
following two lines to each extension's dictionary entry within your Update Manifest to allow existing users
to update automatically to the latest version.
<key>Update From Gallery</key>
<true/>
You may still sign your Safari Extensions with your developer certificate for distribution outside of the Safari
Extensions Gallery, but it will not be a candidate for automatic updating.
Important: You must resubmit your Extension to Apple before it will be displayed in the Extension Gallery.
Online submission is available at https://developer.apple.com/safari/extensions/submission/.
Force Touch Trackpad Mouse Events
Safari’s new mouse event property, webkitForce, provides events and force information from Force Touch
Trackpads. See Responding to Force Touch Events from JavaScript for an introduction to Force Touch Operations.
Use event.webkitForce to create interactivity with the following events and constants.
●
webkitmouseforcewillbegin
●
webkitmouseforcedown
●
webkitmouseforceup
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
8
Safari 9.0
Content Blocking Safari Extensions
●
webkitmouseforcechanged
●
Constants:
MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN
MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN
Content Blocking Safari Extensions
iOS
The new Safari release brings Content Blocking Safari Extensions to iOS. Content Blocking gives your extensions
a fast and efficient way to block cookies, images, resources, pop-ups, and other content.
Your app extension is responsible for supplying a JSON file to Safari. The JSON consists of an array of rules
(triggers and actions) for blocking specified content. Safari converts the JSON to bytecode, which it applies
efficiently to all resource loads without leaking information about the user’s browsing back to the app extension.
Xcode includes a Content Blocker App Extension template that contains code to send your JSON file to Safari.
Just edit the JSON file in the template to provide your own triggers and actions. The sample JSON file below
contains triggers and actions that block images on webkit.org.
Listing 1
Actions and triggers example
[
{
"action": {
"type": "block"
},
"trigger": {
"url-filter": "webkit.org/images/icon-gold.png"
}
},
{
"action": {
"selector": "a[href^=\"http://nightly.webkit.org/\"]",
"type": "css-display-none"
},
"trigger": {
"url-filter": ".*"
}
}
]
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
9
Safari 9.0
Content Blocking Safari Extensions
OS X
Content Blocking is now available on OS X through Safari. Add your JSON file in the new Content Blocker
section of the Safari Extensions Builder, shown in Figure 1, or use the new setContentBlocker API available
on the Safari Extension object.
Figure 1
Safari Extension Builder
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
10
Safari 9.0
Shared Links
Note: The onbeforeload event and canLoad message for content blocking have been deprecated.
Shared Links
Safari on both iOS and OS X now allow App Extensions that send items to Safari’s Shared Links sidebar. Xcode
offers templates for both iOS and OS X Shared Links app extensions. The sample in Listing 2 uses the template
for OS X.
Listing 2
Creating Shared Links in OS X
- (void)beginRequestWithExtensionContext:(NSExtensionContext *)context {
NSExtensionItem *extensionItem = [[NSExtensionItem alloc] init];
// The keys of the user info dictionary match what data Safari expects for
each Shared Links item.
// For the date, use the publish date of the content being linked
extensionItem.userInfo = @{
@"uniqueIdentifier": @"uniqueIdentifierForSampleItem",
@"urlString": @"http://apple.com",
@"date": [NSDate date] };
extensionItem.attributedTitle = [[NSAttributedString alloc]
initWithString:@"Sample title"];
extensionItem.attributedContentText = [[NSAttributedString alloc]
initWithString:@"Sample description text"];
// You can use the NSExtensionItem's attachments property to supply a custom
image for your link.
// extensionItem.attachments = @[ [[NSItemProvider alloc]
initWithContentsOfURL:[[NSBundle mainBundle] URLForResource:@"customLinkImage"
withExtension:@"png"]] ];
[context completeRequestReturningItems:@[ extensionItem ] completionHandler:nil];
}
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
11
Safari 9.0
HTML5 Media
HTML5 Media
AirPlay
Safari 9.0 allows you to create custom controls for HTML5 media with JavaScript AirPlay support. Use Safari's
WebKitPlaybackTargetAvailabilityEvent to detect Airplay availability and then add your own controls
for streaming audio and video to AirPlay devices.
The JavaScript sample below shows an implementation of custom player controls for HTML5 sites.
Listing 3
Custom controls for Airplay
if (window.WebKitPlaybackTargetAvailabilityEvent) {
video.addEventListener('webkitplaybacktargetavailabilitychanged',
function(event) {
switch (event.availability) {
case "available": /* turn stuff on */ break;
case "not-available": /* turn AirPlay button off */
break;
}
})
}
Picture in Picture Support
Picture in Picture (PiP) maintains user engagement, allowing your video to remain in view in a floating video
overlay while users interact with other apps. With Safari 9.0, you can use new JavaScript PiP support to add
your own customized picture-in-picture controls for HTML5 videos, as shown below.
Listing 4
Activating PiP when clicked
if (video.webkitSupportsPresentationMode && typeof video.webkitSetPresentationMode
=== "function") {
// Toggle PiP when the user clicks the button.
pipButtonElement.addEventListener("click", function(event) {
video.webkitSetPresentationMode(video.webkitPresentationMode === "optimized"
? "inline" : "optimized");
});
} else {
pipButtonElement.disabled = true;
}
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
12
Safari 9.0
SFSafariViewController for iOS
For more information on PiP, see Picture in Picture Quick Start in Adopting Multitasking on iPad.
SFSafariViewController for iOS
You can use SFSafariViewController to display web content within your app. The Safari View Controller
shares cookies and other website data with Safari, and has many of Safari's features, like Safari AutoFill and
Safari Reader. Unlike Safari itself, the Safari View Controller UI is tailored for displaying a single page, featuring
a Done button that'll take users right back where they were in your app.
Consider replacing your WKWebView or UIWebView-based browsers with SFSafariViewController if your
app displays web content but does not customize that content.
Icons for Pinned Tabs
Pinned Sites allow your users to keep their favorite websites open, running, and easily accessible.
You can set the icon that the user sees when they pin your site by providing a vector image. Use 100% black
for all vectors with a transparent background in SVG format and add the following markup to all webpages
that the icon should represent (replacing "website_icon" with your own file's name).
<link rel="icon" sizes="any" mask href="website_icon.svg">
Note: This markup should be placed before other <link rel="icon"> elements to avoid
compatibility issues with existing icons.
To specify the color the icon should be displayed in, add the theme-color meta element to your webpage:
<meta name="theme-color" content="red">
The content attribute can specify a color in hexadecimal color values (#990000) or RGB formatted colors
(rgb(153, 0, 0)), or recognized color-keywords, such as: red, lime, or navy.
CSS Scroll Snapping
Safari’s WebKit now provides CSS scroll snapping to keep the focal point of your content in view when scrolling
momentum stops. The following properties are available to customize your page.
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
13
Safari 9.0
Backdrop Filters
-webkit-scroll-snap-type: mandatory;
The viewport comes to rest on a snap point at the end of a scroll operation.
-webkit-scroll-snap-points-y:
-webkit-scroll-snap-points-x:
elements; snap to the element
repeat( N units ); every N-units (pixels, view height/width, percentage, calculated value)
-webkit-scroll-snap-destination:50%50%;
defaults to 0 (left or top depending on scroll orientation)
use 50%50% for center coordinate of an element
-webkit-scroll-snap-coordinate:0%0%;
for example: 50%50%; aligns snap to center of the element
Backdrop Filters
Backdrop filters allow you to add advanced image filters to the backdrops of your elements. Achieve modern
iOS and OS X material effects in your web content layouts using these filters. Overlay with a backdrop-filter
shows a backdrop filter with a blur effect applied to the overlay.
Safari provides for the following functions for the backdrop-filter property:
●
blur()
●
brightness()
●
contrast()
●
drop-shadow()
●
grayscale()
●
hue-rotate()
●
invert()
●
opacity()
●
saturate()
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
14
Safari 9.0
Backdrop Filters
●
sepia()
Figure 2
Overlay with a backdrop-filter
W3C offers more information on filter effects at http://dev.w3.org/fxtf/filters/#typedef-filter-function-list.
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
15
Safari 9.0
Responsive Design Mode
Responsive Design Mode
The Responsive Design Mode provides a fast-switching layout preview of your webpage across a spectrum of
viewport sizes. This viewport quick-look tool helps you quickly spot layout issues on a webpage across many
screen sizes. It includes several preset sizes for Apple devices, shown in Figure 3, and allows custom viewport
sizes to be defined.
Figure 3
A Responsive Design Mode window
Web Inspector Redesign
The new Web Inspector design provides a more intuitive user experience. The use of tabbed view panels keeps
the user oriented and provides quick navigate between development tasks.
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
16
Safari 9.0
ECMAScript 6 Enhancements
A new frame rendering timeline, shown in Web Inspector displaying rendering frames, makes it easy to see
performance with respect to the frames painted to the page.
Figure 4
Web Inspector displaying rendering frames
ECMAScript 6 Enhancements
The following ECMAScript 6 content is now supported by Safari:
●
Classes
●
Computed Properties
●
Weak Set
●
Number Object
●
Octal and Binary Literals
●
Symbol Objects
●
Template Literals
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
17
Safari 9.0
Unprefixed CSS Properties
Unprefixed CSS Properties
The properties in Newly supported ECMAScript 6 properties are now fully supported by Safari, without the
-webkit- prefix.
transition
transition-delay
transition-duration
transition-property
transition-timing-function
animation
cursor: zoom-in;
cursor: zoom-out;
perspective
perspective-origin
transform
transform-origin
transform-style
@keyframes
animation-name
animation-duration
animation-timing-function
animation-iteration-count
animation-direction
animation-play-state
animation-delay
animation-fill-mode
order
align-content
align-items
align-self
justify-content
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
18
Safari 9.0
Unprefixed CSS Properties
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
break-after
break-before
break-inside
columns
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
alt
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
19
Safari 8.0
The following new feature has been added in Safari 8.0.
Quick Website Search
A new feature, Quick Website Search, allows users to access content from a specified website directly from
Safari’s Smart Search field, bypassing their normal search engine. For example, a user might type “app solitaire”
to search for solitaire games on the App Store, or “wiki OS X Yosemite” to find the Wikipedia article on OS X
Yosemite. The desired result would then appear at the top of the suggested completion list for that search.
In OS X, website developers can aid Safari in discovering searchable content by including an OpenSearch
description document on their site, conforming to the format defined in the OpenSearch specification. After
the user has visited a page on the website, the site will then show up in the Manage Websites panel of Safari’s
Search Preferences, allowing the user to selectively enable or disable the Quick Website Search feature for
individual websites. Although the use of OpenSearch is not strictly necessary (Safari’s heuristic is sometimes
able to obtain the information it needs by other means, such as from the form metadata for search fields), it
is strongly recommended that websites publish an OpenSearch description.
Note: Safari on iOS does not support OpenSearch.
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
20
Safari 7.1
The following new feature has been added in Safari 7.1.
UI Minimization
A new property, minimal-ui, has been added for the "viewport" metatag in iOS to allow minimizing the
top and bottom bars as a page loads on iPhone. For example:
<meta name="viewport" content="width=1024, minimal-ui">
Tapping the top bar brings the bars back; tapping back in the content dismisses them again.
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
21
Safari 7.0
The following new features have been added in Safari 7.0.
New Layout Models
Sophisticated and flexible new layout capabilities give you greater control over the visual presentation of your
content and help improve the readability of your web pages.
Columns and Pagination
Column- and page-based layout have always been fundamental to content presentation in print media. Safari
supports such effects with a range of column-related properties (defined in the CSS Multi-Column Layout
Module):
●
-webkit-column-count
●
-webkit-column-width
●
-webkit-column-gap
●
-webkit-column-rule
●
-webkit-column-rule-color
●
-webkit-column-rule-style
●
-webkit-column-rule-width
●
-webkit-column-break-after
●
-webkit-column-break-before
●
-webkit-column-break-inside
●
-webkit-column-span
●
-webkit-column-axis
●
-webkit-column-progression
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
22
Safari 7.0
New Layout Models
A new set of properties in the UIWebView class let you achieve the same effects without using CSS. This can
be useful if you want to paginate your entire web view as a whole, or if you don’t control the content it will
be displaying: you can use the new UIWebView properties to bypass the existing style properties embedded
in the imported content. The following new properties have been added to UIWebView:
●
paginationMode: Determines whether to break up content in the web view into pages that fill the view
one screen at a time or to show them as one long scrolling view. Possible values (enumerated type
UIWebPaginationMode) are:
●
UIWebPaginationModeUnpaginated (default)
●
UIWebPaginationModeLeftToRight
●
UIWebPaginationModeRightToLeft
●
UIWebPaginationModeTopToBottom
●
UIWebPaginationModeBottomToTop
If set to a value other than UIWebPaginationModeUnpaginated, toggles a paginated layout on the
content, causing the web view to lay out its content according to the values of pageLength and
gapBetweenPages (see below).
●
paginationBreakingMode: Determines whether to lay out content by page or by column. Possible
values (enumerated type UIWebPaginationBreakingMode) are:
●
UIWebPaginationBreakingModePage (default)
●
UIWebPaginationBreakingModeColumn
If set to UIWebPaginationBreakingModeColumn, causes content to respect the CSS column-related
properties listed above in place of page breaking.
●
pageLength: Specifies the size of each page, in points, in the direction of page flow (page width if
paginationMode is UIWebPaginationModeLeftToRight or UIWebPaginationModeRightToLeft,
page height if it is UIWebPaginationModeTopToBottom or UIWebPaginationModeBottomToTop).
Default is 0, meaning to use the size of the viewport to determine the dimensions of the page.
●
gapBetweenPages: Specifies the amount of space between pages, in points. Default is 0.
●
pageCount (read-only): Returns the number of pages produced by the web view’s layout.
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
23
Safari 7.0
New Layout Models
CSS Regions
CSS regions (defined in the CSS Regions Module) allow you to create advanced layout designs consisting of
multiple, free-form regions, such as the one shown here:
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
24
Safari 7.0
New Layout Models
Layout and content are defined separately in your CSS markup. You can then use the -webkit-flow-from
and -webkit-flow-into properties to flow the content into the predefined design, producing rich,
magazine-like layouts like this:
Flexible Boxes
Flexible boxes (commonly called “flexboxes,” defined in the CSS Flexible Box Layout Module) are layout elements
that can grow or shrink to fill the available space within an enclosing container. This feature has been available
in Safari since version 5.1, but that older implementation has now been deprecated in favor of a new one
supporting the following properties:
●
-webkit-flex
●
-webkit-flex-direction
●
-webkit-flex-wrap
●
-webkit-flex-flow
●
-webkit-flex-basis
●
-webkit-flex-grow
●
-webkit-flex-shrink
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
25
Safari 7.0
Media Features
Media Features
The following new media features have been added.
AirPlay API
New HTML and JavaScript APIs let you add custom controls to your app that match the behavior of the standard
iOS AirPlay control. When AirPlay targets are available, iOS displays an AirPlay button that invokes the AirPlay
route picker, allowing the user to stream video or audio content to an Apple TV–connected device or
AirPlay-enabled sound system. The button displays a distinctive visual style (currently a blue background tint)
to indicate when a wireless AirPlay target is active; when no AirPlay targets are available, the button is hidden.
The new APIs give you the means to match this behavior with your own custom controls.
All HTML media elements allow AirPlay streaming by default. A new Boolean attribute on <video> elements,
x-webkit-wirelessvideoplaybackdisabled, lets you opt out of allowing video AirPlay for wireless
targets. (Wireless audio playback is always allowed.) A corresponding property in the JavaScript
HTMLVideoElement interface provides access to the same behavior from JavaScript code.
Note: This attribute supersedes the older x-webkit-airplay attribute, which is now deprecated;
however, the old attribute values will still be respected, denying wireless playback if an element has
x-webkit-airplay="deny".
A new JavaScript event type, webkitplaybacktargetavailabilitychanged, is fired on HTML media
elements (video or audio) to signal when AirPlay availability changes. The event object’s availability
property returns a DOMString value, either "available" or "not-available", which you can test to
determine whether to display your custom AirPlay button. (Note that there is no direct property access to the
media element’s availability state; it is accessible only as an event property on the
WebKitPlaybackTargetAvailabilityEvent object.) When you register a listener for this event type, an
initial event is automatically dispatched to inform you of the current availability state; subsequent events report
whenever the state changes, so you can respond by showing or hiding your AirPlay button. To implement the
required response when the button is clicked, the new HTMLMediaElement method
webkitShowPlaybackTargetPicker() displays the host device’s native AirPlay route picker (currently an
action sheet on iPhone or a popover on iPad).
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
26
Safari 7.0
Font Enhancements
Note: Because monitoring AirPlay availability may drain battery power, you should avoid registering
a listener for the webkitplaybacktargetavailabilitychanged event unless you have a specific
need for it, and remove any registered listeners when they are not needed.
The HTMLMediaElement property webkitCurrentPlaybackTargetIsWireless indicates whether the
currently selected AirPlay target is wireless, so that you can adjust your AirPlay button’s visual style accordingly.
Changes in the wireless state are signaled by an event of type webkitcurrentplaybacktargetiswireless,
reported with a generic Event object having no special property to denote the new wireless state; your event
listener can obtain this information from the media element’s webkitCurrentPlaybackTargetIsWireless
property.
WebVTT Enhancements
WebVTT (Web Video Text Tracks) is an HTML5 standard for incorporating text captions in video content for
hearing-impaired users or language-translation subtitles. Safari’s support for WebVTT has been enhanced to
let you embed VTT captions within a movie file itself rather than in a separate file of their own, and to add style
properties to a caption to control its visual presentation:
●
visibility
●
font-family
●
font-size
●
text-decoration
●
text-outline
●
text-shadow
●
color
●
opacity
●
background
●
outline
●
white-space
Font Enhancements
The following enhancements to font handling have been added.
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
27
Safari 7.0
CSS Enhancements
Dynamic Type
The Dynamic Type mechanism, introduced in iOS 7, allows applications to choose fonts for text display based
on their intended semantic use (such as for body text, headlines, or captions). WebKit has added a series of
new properties to support the use of Dynamic Type in your web pages:
●
-apple-system-body
●
-apple-system-headline
●
-apple-system-subheadline
●
-apple-system-caption1
●
-apple-system-caption2
●
-apple-system-footnote
●
-apple-system-short-body
●
-apple-system-short-headline
●
-apple-system-short-subheadline
●
-apple-system-short-caption1
●
-apple-system-short-footnote
●
-apple-system-tall-body
Kerning and Ligatures
Kerning and ligatures for text display are now enabled by default; you can disable them, if necessary, by setting
text-rendering:optimizeSpeed.
CSS Enhancements
The following CSS enhancements have been added.
CSS calc() Function
Safari now supports the CSS calc() function (defined in the CSS Values and Units Module). This extremely
useful feature lets you simplify your programming by specifying any numerical CSS value by means of a
mathematical equation, and can improve performance by, for instance, eliminating the need for repetitive
JavaScript calculations on resize.
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
28
Safari 7.0
Graphics Enhancements
Clipping Paths
The new CSS property -webkit-clip-path (defined in the CSS Masking Module) specifies a clipping path
for any element. Supported shapes (defined in the CSS Shapes Module) include:
●
rectangle()
●
circle()
●
ellipse()
●
polygon()
Sticky Scrolling
The new CSS property value position:-webkit-sticky allows a page element to implement “sticky”
scrolling behavior, constrained by the page’s viewport or a scrollable ancestor, without resorting to asynchronous
JavaScript scroll events that can interfere with smooth scrolling.
Graphics Enhancements
A number of new features and enhancements have been added to the HTML5 canvas element.
Blending Modes
The globalCompositeOperation property now supports several new blending and compositing modes
for combining colors:
●
normal
●
multiply
●
screen
●
overlay
●
darken
●
lighten
●
color-dodge
●
color-burn
●
hard-light
●
soft-light
●
difference
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
29
Safari 7.0
Graphics Enhancements
●
exclusion
●
hue
●
saturation
●
color
●
luminosity
●
clear
●
copy
●
destination
●
source-over
●
destination-over
●
source-in
●
destination-in
●
source-out
●
destination-out
●
source-atop
●
destination-atop
●
xor
●
lighter
Path Object
A new object class, Path, allows you to have multiple paths open for definition simultaneously. Formerly,
calling the beginPath() method to start a new path would lose the path that was previously open. You can
now create multiple Path objects, assign them to variables, and switch from one to another without losing
the one you were previously working on. In particular, this simplifies hit-testing by eliminating the need to
explicitly rebuild every path that might be hit.
Retina Backing Store
Rendering sharp, high-resolution images on a Retina display requires a “doubled” backing store with twice the
width and height (four times the number of pixels) as on a non-Retina display. Safari 6 supported this by
auto-doubling the specified dimensions of the backing store when rendering to a Retina display. However,
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
30
Safari 7.0
New Power-Saving Features
because of memory constraints, iOS does not perform this auto-doubling, leading to resolution mismatches,
confusion, and inconvenience. To alleviate the difficulties, Safari 7 no longer auto-doubles the backing store,
but matches the iOS behavior by honoring the requested dimensions as specified.
Note: Existing code using the devicePixelRatio and webkitBackingStorePixelRatio
properties to match the resolution of the backing store to that of the device will continue to work
correctly without modification. Code that does not rely on these properties may have to be modified
to accommodate the new behavior.
New Power-Saving Features
New features have been added to help minimize power consumption and prolong battery life. For more
information on these features, see the 2013 WWDC session “Power and Performance: Optimizing Your Website
for Great Battery Life and Responsive Scrolling”.
Application Napping for Safari Tabs
Application napping (“App Nap”) is a new feature in OS X v10.9 that conserves system resources by lowering
an application’s CPU and I/O priority and throttling back its JavaScript timer usage when the application is
engaged in tasks that are not critically important to the user experience. Safari 7 makes use of this feature by
giving each browser tab its own separate Web Content process for loading and rendering the page, and then
napping this process when the tab is not immediately visible to the user. This allows Safari to focus all of its
resources on the currently active tab, providing improved user responsiveness and avoiding unnecessary
battery drain. A tab is eligible for napping when it meets any of the following conditions:
●
The tab is in the background.
●
The browser window is minimized.
●
The browser window is in a desktop space not currently displayed.
●
The browser window is occluded (covered) by another window or other object on the screen.
●
The browser window is idle (has not been updated recently).
●
The screen saver is on.
Napping is inhibited when a tab is engaged in useful nonvisual tasks such as playing audio or dynamically
loading content.
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
31
Safari 7.0
New Power-Saving Features
Page Visibility Detection
A pair of new properties on the document object allow a page to determine when it is not visible to the user,
so that it can avoid unnecessary processing and minimize power consumption:
●
document.hidden: A Boolean flag telling whether the document is currently hidden.
●
document.visibilityState: A string denoting the document’s current visibility state. Possible values
are:
●
"hidden": The document is currently hidden.
●
"visible": The document is currently visible.
●
"prerender": The document’s contents are currently being preloaded but not yet rendered. This
occurs, for instance, when the user begins typing a URL into the browser’s location field: the browser
attempts to predict the most likely completion of the partial URL as it is typed and begins preloading
the predicted page so that it will be ready for immediate rendering when the Return key is pressed.
A new event type, visibilitychange, notifies the application when the page’s visibility state has changed.
The application can install an event listener that tests the values of the properties above and responds
accordingly. For example:
document.addEventListener ('visibilitychange',
function(event)
{
if (document.hidden)
{ ... }
else
{ ... }
},
false);
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
32
Safari 6.0
The following new features have been added in Safari 6.0.
Web Audio API
The Web Audio API is a high-level JavaScript API for processing and synthesizing audio in web applications.
Whereas the HTML5 audio element allows for basic streaming and audio playback, the Web Audio API is
powerful enough for more complex audio applications that require mixing, processing, or filtering audio data,
such as a modern game audio engine or an interactive audio production application.
HTML5 Media Controllers
An HTML5 media controller can synchronize and otherwise coordinate the playback of multiple media elements.
For instance, you could use a media controller to overlay a sign language interpretation track over a video
track and keep the two in synchronization.
A media controller has the same methods and events as an HTML media element. This means that, for example,
when you call the pause() method on a controller, any media slaved to that controller will be paused; or
when a controller receives a canplaythrough event, all media slaved to that controller can be played through
to the end without buffering.
HTML5 Timed Text Tracks
HTML5 timed text tracks enable captions, subtitles, descriptions, and chapters by letting you specify the timing
of text that appears with a video element.
CSS Filters
CSS filters let you apply pixel effects to any image or web page element with a single line of code. Available
filter functions include the following:
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
33
Safari 6.0
CSS Filters
●
sepia()
●
hue-rotate()
●
saturate()
●
invert()
●
opacity()
●
brightness()
●
contrast()
●
blur()
●
grayscale()
●
drop-shadow()
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
34
Safari 6.0
SVG Filters
Filters can be combined, and changes to the filter property can be animated with CSS transitions or animations.
The figures below show an image with various CSS filters applied to it.
SVG Filters
Using Scalable Vector Graphics (SVG) filters, you can combine several filter primitive elements and light source
elements into a single sophisticated filter, which can then be applied to any SVG element.
Redesigned Web Inspector
The Safari Web Inspector has a streamlined new design that speeds up common development tasks. It features
a new iconography, a navigation bar that lets you easily switch between different web page elements, a
persistent JavaScript console, integrated timelines, and more. Additionally, JavaScript debugging is now enabled
by default, and the page source view now opens in the Web Inspector automatically.
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
35
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.
Note: The JavaScript debugger named Drosera, which formerly shipped with WebKit nightly builds,
no longer works with the Safari 4 Developer Preview. It has been replaced by the new integrated
JavaScript debugger, which is much faster and more convenient.
Console Methods
WebKit has some new and changed console methods that improve functionality and compatibility.
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
36
Safari 4.0
Console Methods
Note: All of the console methods are compatible with Firebug.
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:
%d or %i
Integer
%[0.N]f
Floating-point value with N digits of precision
%o
Object
%s
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.
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
37
Safari 4.0
Transforms in JavaScript
Note: DOM nodes formatted with the %o specifier link to that node in the Web Inspector Elements
pane
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 (page 37).
●
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.
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
38
Safari 4.0
Gradients, Masks, and Reflections in CSS
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.
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
39
Safari 4.0
WebKit Availability Macros
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>
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
40
Safari 4.0
Cross-Site XML HTTP Requests
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.
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
41
Safari 4.0
HTML5 Canvas
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.
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
42
Document Revision History
This table describes the changes to What's New in Safari .
Date
Notes
2015-06-08
Added information for Safari on iOS 9 and Safari 9.0 on OS X.
2015-01-12
Added information for Safari in iOS 8 and Safari on OS X.
2014-04-24
Consolidated previous Safari release notes into a single document. Added
information about Safari 7 on OS X and Safari on iOS 7 and iOS 7.1.
2015-06-08 | Copyright © 2015 Apple Inc. All Rights Reserved. Apple Confidential Information.
43
Apple Inc.
Copyright © 2015 Apple Inc.
All rights reserved.
No part of this publication may be reproduced,
stored in a retrieval system, or transmitted, in any
form or by any means, mechanical, electronic,
photocopying, recording, or otherwise, without
prior written permission of Apple Inc., with the
following exceptions: Any person is hereby
authorized to store documentation on a single
computer or device for personal use only and to
print copies of documentation for personal use
provided that the documentation contains
Apple’s copyright notice.
No licenses, express or implied, are granted with
respect to any of the technology described in this
document. Apple retains all intellectual property
rights associated with the technology described
in this document. This document is intended to
assist application developers to develop
applications only for Apple-branded products.
Apple Inc.
1 Infinite Loop
Cupertino, CA 95014
408-996-1010
Apple, the Apple logo, AirPlay, Apple TV, iPad,
iPhone, Mac, OS X, Pages, Safari, and Xcode are
trademarks of Apple Inc., registered in the U.S.
and other countries.
Retina is a trademark of Apple Inc.
App Store is a service mark of Apple Inc.
IOS is a trademark or registered trademark of
Cisco in the U.S. and other countries and is used
under license.
Java is a registered trademark of Oracle and/or
its affiliates.
APPLE MAKES NO WARRANTY OR REPRESENTATION,
EITHER EXPRESS OR IMPLIED, WITH RESPECT TO THIS
DOCUMENT, ITS QUALITY, ACCURACY,
MERCHANTABILITY, OR FITNESS FOR A PARTICULAR
PURPOSE. AS A RESULT, THIS DOCUMENT IS PROVIDED
“AS IS,” AND YOU, THE READER, ARE ASSUMING THE
ENTIRE RISK AS TO ITS QUALITY AND ACCURACY.
IN NO EVENT WILL APPLE BE LIABLE FOR DIRECT,
INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES RESULTING FROM ANY DEFECT, ERROR OR
INACCURACY IN THIS DOCUMENT, even if advised of
the possibility of such damages.
Some jurisdictions do not allow the exclusion of
implied warranties or liability, so the above exclusion
may not apply to you.