Safari 9.1 The following information is from the Mac Developer Library dated Jan. 11, 2016 for new features in 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
<source media=”(min-width: 1000px)” srcset=”picture_large.jpg”>
<source media=”(min-width: 500px)” srcset=”picture_small.jpg”>
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.
Figure 1 Web Inspector’s Visual Styles sidebar
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.
var gl = canvas.getContext(“webgl”);
var vendorString = gl.getParameter(UNMASKED_VENDOR_WEBGL);
var rendererString = gl.getParameter(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.
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/.
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.