Safari 9.1

The following new features have been added in Safari 9.1.

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:

Figure 1  Web Inspector's Visual Styles sidebar

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

CSS Variables

Safari 9.1 supports custom properties that can be reused with the var() function. For example, the declared value —-company-red: #ff1e1d; can be used as color: var(--company-red);. See http://www.w3.org/TR/css-variables/.

Added Support

  • The round and space values are supported for the border-image-repeat property. See http://www.w3.org/TR/css3-background/#border-image-repeat.

  • The all property keyword is now supported to enable targeting of every available property. See http://www.w3.org/TR/css-cascade-4/#all-shorthand.

  • The revert and unset keywords are supported for CSS properties, including the all property. See http://www.w3.org/TR/css-cascade-4/#default.

  • Font features are accessible through the font-variant-ligatures, font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-east-asian and font-feature-settings properties, providing advanced typographical settings for OpenType fonts. See http://www.w3.org/TR/css-fonts-3/#font-variant-prop.

  • The will-change property helps optimize Safari performance for changing elements. If the value of will-change creates a CSS stacking context, the target element becomes a CSS stacking context. If the value of will-change triggers accelerated rendering (“compositing”)—for example transform, filter or backdrop-filter—Safari creates a compositing layer for the target element. Creating this layer can consume additional memory and should be used judiciously. See http://www.w3.org/TR/css-will-change/.

Unprefixed CSS Filters

Safari supports the filter property without the -webkit- prefix. For more information on CSS filters, see http://www.w3.org/TR/filter-effects/#FilterProperty.