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:
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
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
andspace
values are supported for theborder-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
andunset
keywords are supported for CSS properties, including theall
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
andfont-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 ofwill-change
creates a CSS stacking context, the target element becomes a CSS stacking context. If the value ofwill-change
triggers accelerated rendering (“compositing”)—for exampletransform
,filter
orbackdrop-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.
Copyright © 2018 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2018-02-22