Safari 10.0: Full‑Stack Web API and Front‑End Feature Guide

Web APIs

IndexedDB Support

Safari 10.0 implements the full W3C IndexedDB specification, allowing client‑side offline storage and caching of large amounts of structured data.

Programmatic Cut and Copy

JavaScript can now invoke clipboard operations directly:

document.execCommand('cut')  // cut
document.execCommand('copy') // copy

CSP 2.0

Content Security Policy is upgraded to the 2.0 standard, offering stronger content‑origin controls.

Shadow DOM

Shadow DOM 1.0 provides a solid foundation for Web Components, allowing developers to encapsulate HTML, CSS, and JavaScript so that component internals do not interfere with the surrounding page.

ES6

Safari on macOS and iOS fully supports the ECMAScript 2015 (ES6) language features.

ECMAScript Internationalization

The ECMAScript Internationalization API (ECMA‑402) is available, enabling locale‑aware number, currency, and date‑time formatting.

DOM Compatibility Improvements

Enhanced DOM compliance raises Safari’s W3C test pass rate and improves cross‑browser compatibility.

3D Touch Events

iOS now exposes a touchforcechange event (equivalent to the private webkitmouseforcechanged on macOS) whose force property ranges from 0.0 to 1.0.

WebGL

Context attribute antialias defaults to true on iOS.

var context = canvas.getContext('webgl', { antialias: false });

Context attribute alpha can be set to false on iOS.

var context = canvas.getContext('webgl', { alpha: false }); // false is effective

Only 16 WebGL contexts may exist simultaneously; creating a 17th destroys the oldest.

Media

Inline Video Autoplay on iOS

The webkit-playsinline attribute enables embedded playback instead of fullscreen.

Videos without a visible scrubber or with the scrubber disabled will autoplay after page load.

Picture‑in‑Picture on macOS

Safari on macOS supports picture‑in‑picture, allowing videos to float above other windows and persist across desktop switches.

Developers can add picture‑in‑picture to custom <video> elements via the Presentation Mode API.

Text Features

WOFF 2.0 Support

WOFF 2.0 improves font compression, reducing bandwidth for web‑font loading.

Font Loading API

Web developers can use the CSS Font Loading Module Level 3 to load fonts via script and monitor loading status; fonts are fetched only when characters fall within the Unicode range required by the page.

Layout and Rendering

CSS object‑position

The object-position property aligns replaced elements ( video, img, object) inside their containers, functioning similarly to background-position.

SVG Path Clipping

CSS Shapes Level 2 allows clipping of elements using path definitions, including Bézier curves and the evenodd fill rule.

#RBGA and #RRGGBBAA Color Notation

Safari implements CSS Color Level 4, supporting the newer #RBGA and #RRGGBBAA syntaxes.

New border-image Values

The round and space keywords are now recognized.

New image-rendering Values

crisp-edges

and pixelated are supported, with WebKit prefixes -webkit-crisp-edges and -webkit-optimize-contrast as equivalents.

Right‑to‑Left Language Support

The direction CSS property now correctly adjusts scrollbars and form styling for RTL scripts.

Media Query color-gamut

Media queries can target wide‑gamut displays using color-gamut: p3 (example shown).

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

CSS Break Properties

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

WebKit‑Prefix‑Free CSS

The following properties no longer require a -webkit- prefix: filter, cross-fade, image-rendering.

Web Inspector

WebDriver Support

Safari on macOS implements WebDriver, enabling automated testing via the /usr/bin/safaridriver binary. Remote Automation can be enabled in the Develop menu; compatible libraries include Selenium WebDriver.

Memory Debugging

The updated Timelines panel visualizes memory usage and records heap allocation snapshots, aiding performance optimization.

Faster Sampling Profiler

When the debugging tools are disabled, the new JavaScript profiler samples code at higher rates on high‑DPI screens, providing more accurate timing data.

Native APIs

Apple Pay on the Web

Developers can invoke Apple Pay in web pages for secure, Touch ID‑ or Apple Watch‑based payments; see the ApplePay JS Framework Reference for details.

WKWebView Link Preview

Updated WKWebView APIs allow custom preview views via Peek and Pop gestures, avoiding navigation to Safari.

The allowsLinkPreview property defaults to YES on iOS 10 and later.

Safari View Controller Customization

Since iOS 10, the Safari view controller’s background color can be customized, extending the iOS 9 capability to style UI controls.

Keyboard Handling in WKWebView

When the keyboard appears on iOS 10, update window.innerHeight instead of triggering a resize event to match native Safari behavior.

Safari App Extensions

Developers can now create native Safari app extensions for macOS, port existing iOS content blockers, and inject scripts or styles into web content.