IndexedDB Support

Safari’s IndexedDB implementation now fully supports the recommended standard. You may now use the API to store structured data for web applications that work offline or that require large amounts of client-side data caching.

Programmatic Cut and Copy Support

Use JavaScript commands to programmatically cut and copy text to the clipboard with document.execCommand('cut') and document.execCommand('copy').

CSP 2.0

Content Security Policy (CSP) support has been enhanced by including version 2.0 of the standard.

Shadow DOM

Version 1 of the Shadow DOM standard provides the foundation for Web Components. You can take advantage of Shadow DOM to encapsulate functionality without worrying about conflicts between scripts and styles on the page.

ES6

The ECMAScript 2015 standard, also known as ES6, is completely supported, bringing this major JavaScript evolution to Safari on macOS and iOS.

ES Internationalization

Integration of the ECMAScript Internationalization API standard, also known as ECMA-402, supports client-side number, currency, and date-formatting that honors the user’s language and locale or uses a provided language and locale.

DOM Compatibility Improvements

Many fundamental browser- and site-compatibility improvements now ensure that Safari 10 passes even more World Wide Web Consortium (W3C) tests and is compatible with other browsers.

3D Touch Events

For 3D Touch on iOS, the touchforcechange event is called only when the force changes. The event is the 3D Touch equivalent of webkitmouseforcechanged for WebKit in macOS. The values of the force property of touch objects range from 0.0 to 1.0.

WebGL

• The antialias context creation parameter is now supported in iOS. It defaults to true.

• The alpha context creation parameter now supports the value false in iOS.

• The total number of active WebGL contexts on a page is limited to 16. After that limit is reached, adding a new context causes the oldest context to be destroyed.

Geolocation

Starting in Safari 10.0, unencrypted websites can no longer access Geolocation APIs. You must use a secure connection in order to access Geolocation APIs.

Inline and Auto Video Playback in iOS

• When the playsinline property is specified, Safari on iPhone allows videos to play inline. Videos without the property will commence playback in fullscreen, but users can pinch close on the video to continue playing the video inline.

• On iOS, videos without audio tracks or with disabled audio tracks can play automatically when the webpage loads.

Picture in Picture in macOS

• Safari 10 brings Picture in Picture to macOS so users can watch video in a separate, resizable window that stays on top of other application windows and remains on-screen when switching desktop spaces.

• Safari's default HTML5 video controls includes a new Picture in Picture control.

• If you use custom HTML5 video controls, you can add Picture in Picture functionality using the JavaScript presentation mode API.

WOFF 2.0 Support

Web Open Font Format (WOFF) 2.0 support in Safari on macOS 10.12 and iOS 10 improves compression of website fonts, so fonts require less bandwidth to load.

Font Loading

• Web developers can use the CSS Font Loading Module Level 3 specification to create and load font faces from a script and track the loading status of fonts.

• Web fonts are downloaded only if the characters of the rendered text are within the font's Unicode range.

CSS Support for Object Position

The object-position property controls where content in replaced elements—such as video, img, and object—are positioned inside the containing box element. The object-position and background-position properties are used in a similar way.

Support Clipping Using SVG Paths

You can clip to more sophisticated shapes, including Bezier path segments and the evenodd fill rule, by using a path() shape, as specified in the CSS Shapes Level 2 specification.

Support for #RGBA and #RRGGBBAA

Safari accepts #RGBA and #RRGGBBAA color values as described in the CSS Color Level 4 specification.

New Values for Border Image

The round and space values for the border-image CSS property are supported.

New Values for Image Rendering

Support is available for crisp-edges and pixelated values for the image-rendering property. The prefixed values -webkit-crisp-edges and -webkit-optimize-contrast map to the crisp-edges value.

Right-to-Left Language Support

The location of scrollbars and the appearance of form controls are adjusted based on the direction CSS property.

Media Query for Wide Color Gamut Support

A media query added to CSS or picture elements provides different presentation styles when content is displayed on a device with a wide color gamut, such as the Display P3 color space.

@media (color-gamut: p3) { … }

CSS Break Properties

The break-after, break-before, and break-inside CSS properties are now supported.

Unprefixed CSS Features

The following CSS features are supported without the -webkit- prefix.

• filter

• cross-fade

• image-rendering

Accessibility

Pinch-to-zoom is always enabled for all users. The viewport setting for user-scalable is ignored.

WebDriver Support

Safari on macOS supports WebDriver, which lets you automate web-content testing. It provides a set of interfaces to manipulate DOM elements and control the browser’s behavior. You can enable Remote Automation in the Develop menu and then launch the server using /usr/bin/safaridriver. For information about library integrations as they become available, see the information about Selenium WebDriver.

Memory Debugging

Web Inspector includes new timelines to visualize web application memory usage and plots heap allocation snapshots over time. These tools help you identify areas to improve for optimal memory performance.

Fast Sampling Profiler

The new JavaScript profiler delivers fast performance by sampling running code at a high resolution while disabling debugging tools. It allows scripts to run at full JIT-accelerated (just-in-time compilation) speeds for accurate timeline recording.

Apple Pay for the Web

You can give customers an easy, secure, and private way to pay for physical goods and services—such as groceries, clothing, tickets, reservations, and more. Users can check out with a single touch using Apple Pay with Touch ID on their iPhone, or by double-clicking the side button on Apple Watch. To incorporate Apple Pay into your websites, see ApplePay JS Framework Reference.

WKWebView Preview Actions

• The updated WKWebView API supports link previews that display a custom view controller. With this API, you can create views using Peek and Pop inside your app instead of popping to Safari, and you can specify custom preview actions. The new methods are part of the WKUIDelegate class—webView:shouldPreviewElement:, webView:previewingViewControllerForElement:defaultActions:, and webView:commitPreviewingViewController:.

• The WKWebView.allowsLinkPreview property defaults to YES in apps for iOS 10.0 or later.

Safari View Controller

Safari View Controller on iOS 10 now supports color tinting for view bar backgrounds. Combined with the color tinting of UI control elements (available in iOS 9), Safari View Controller can be customized to provide your users a cohesive look for their in-app experience.

WKWebView Behavior with Keyboard Displays

Safari and WKWebView on iOS 10 do not update the window.innerHeight property when the keyboard is shown. On previous versions of iOS WKWebView would update the window.innerHeight property when the keyboard is shown.