Picture Element Support

You can use the HTML picture element to provide Safari with multiple versions of the image for different browser configurations and viewport sizes. Safari evaluates the picture's image resources in the order in which they are provided. Safari displays the first image resource with media attributes that conform to the browser's user agent and device specifications. Include an img element, like the one shown in Listing 1, as fallback for browsers without picture element support. For more information, see http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-picture-element.

Listing 1  A picture element with multiple sources

<picture>

    <source media="(min-width: 1000px)" srcset="picture_large.jpg">

    <source media="(min-width: 500px)" srcset="picture_small.jpg">

    <img src="picture_default.jpg" alt="My picture">

</picture>

Web Inspector

Safari Web Inspector improvements include:

• The Timelines tab has a faster response time.

• The new Watch Expressions section in the Scope Chain sidebar makes debugging even faster.

• The new Visual Styles sidebar provides visual tools to help you modify webpage styles.

• HTML pseudo-elements are now visible in the DOM tree allowing for easier styling. The ::before element is highlighted in Figure 1.

Viewport Changes

When Safari is in split-screen mode, viewport meta tags with the "width=device-width" attribute cause the page to scale down to fit content that overflows the viewport bounds. You can override this behavior by adding "shrink-to-fit=no" to your meta tag, as shown below. The added value will prevent the page from scaling to fit the viewport. When Safari is not in split-screen mode, the content will not scale down.

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

Gesture Events for OS X

iOS gesture events are now supported on Safari for OS X. Use OS X gesture events to detect pinching and rotation on the Magic trackpad. The gestureStart, gestureChange, and gestureEnd events are supported with event.rotation and event.scale properties. For more information on gesture events, see GestureEvent Class Reference.

Fast-Tap on iOS

On Safari for iOS, the 350 ms wait time to detect a second tap has been removed to create a “fast-tap” response. This is enabled for pages that declare a viewport with either width=device-width or user-scalable=no. Authors can also opt in to fast-tap behavior on specific elements by using the CSS touch-action property, using the manipulation value. See http://www.w3.org/TR/pointerevents/#the-touch-action-css-property.

WebGL Rendering

Safari now exposes the WEBGL_DEBUG_RENDERER extension for the JavaScript WebGL API. This extension uses the canvas context (canvas.getContext("webgl")) to detect the graphics hardware, as shown below. The UNMASKED_VENDOR_WEBGL and UNMASKED_RENDERER_WEBGL properties return string values for the vendor and renderer. See https://www.khronos.org/registry/webgl/extensions/WEBGL_debug_renderer_info/.

var canvas = document.getElementById("canvas");

var webgl = canvas.getContext("webgl");

var debugRenderer = webgl.getExtension('WEBGL_debug_renderer_info');

var vendor = webgl.getParameter(debugRenderer.UNMASKED_VENDOR_WEBGL);

var renderer = webgl.getParameter(debugRenderer.UNMASKED_RENDERER_WEBGL);

Image Smoothing Quality for Canvas Rendering

By default, Safari uses an efficient lower-quality scaling algorithm when drawing images into a canvas element. With Safari 9.1, you can opt in to higher-quality scaling by setting the imageSmoothingQuality property to medium or high. See http://html.spec.whatwg.org/multipage/scripting.html#image-smoothing.

Displaying Dialogs

It is now possible to switch tabs, navigate, and close a webpage while displaying a JavaScript dialog.

Displaying a JavaScript dialog—alert, confirm, or prompt—no longer activates the calling tab.

The dialog shown in response to the beforeunload event no longer displays the string returned by the beforeunload event listener. The dialog now always displays, “Are you sure you want to leave this page?”

Content shown by the showModalDialog function is modal for the webpage presenting the content. It is not modal for other tabs or for the Safari browser.

CSS Enhancements