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
<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">
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
::beforeelement is highlighted in Figure 1.
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
gestureEnd events are supported with
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
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.
Safari now exposes the
canvas.getContext("webgl")) to detect the graphics hardware, as shown below. The
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
high. See http://html.spec.whatwg.org/multipage/scripting.html#image-smoothing.
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.
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/.
spacevalues are supported for the
border-image-repeatproperty. See http://www.w3.org/TR/css3-background/#border-image-repeat.
allproperty keyword is now supported to enable targeting of every available property. See http://www.w3.org/TR/css-cascade-4/#all-shorthand.
unsetkeywords are supported for CSS properties, including the
allproperty. See http://www.w3.org/TR/css-cascade-4/#default.
Font features are accessible through the
font-feature-settingsproperties, providing advanced typographical settings for OpenType fonts. See http://www.w3.org/TR/css-fonts-3/#font-variant-prop.
will-changeproperty helps optimize Safari performance for changing elements. If the value of
will-changecreates a CSS stacking context, the target element becomes a CSS stacking context. If the value of
will-changetriggers accelerated rendering (“compositing”)—for example
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.