Fetch

Fetch is a flexible generic request-and-response API for the web, designed to replace XMLHttpRequest. The Fetch API makes it straightforward to access response headers and has built-in support for making CORS-friendly requests. It uses JavaScript Promises to make handling results easier.

IndexedDB 2.0

Safari's IndexedDB implementation is faster and fully standards compliant, and supports new IndexedDB 2.0 features.

Custom Elements

Custom Elements provides a mechanism for defining your own HTML elements with custom reaction callbacks to respond to changes in values. Combined with the slot-based shadow DOM API introduced last year, Custom Elements makes it possible to create reusable components.

Input Events

Input Events simplifies the process of implementing rich text editing experiences on the web. The Input Events API adds a new beforeinput event to monitor and intercept default editing behaviors and enhances the input event with new attributes.

Pointer Lock

In macOS Safari, an element can request pointer lock in response to a user gesture. Locking the pointer hides the cursor and extends the Mouse Events interface with movementX and movementY properties to provide raw mouse movement data. When the pointer is locked, users will see a banner explaining that the mouse cursor is hidden, and that they can get out of pointer lock by pressing the Escape key.

Gamepad

The Gamepad API allows web content to receive input from connected gamepad devices. It simplifies the code required to support a wide variety of layouts, buttons, and joystick axes by mapping various input devices to a standard gamepad layout.

ECMAScript 2016 and ECMAScript 2017

Support for ECMAScript 2016 and ECMAScript 2017 is available in Safari for macOS and iOS. It adds support for async and await syntax, along with shared memory objects, including Atomics and Shared Array Buffers.

Interactive Form Validation

New support for interactive form validation makes it easier to create forms with validation constraints that automatically validate user data when the form is submitted. This feature helps you communicate what kind of data your form needs, and helps users understand how to enter correct information.

HTML5 Download Attribute

The download attribute for anchor elements indicates that the link target is a download link that downloads a file, instead of a navigational link. When you click a a link with the download attribute, the target is downloaded as a file. Optionally, the value of the download attribute provides the suggested name of the file.

HTML Media Capture

Safari on iOS supports the HTML Media Capture form extension. Using this extension, you can create forms that capture live data from a camera on the user’s device for use as a file input. The accept attribute states whether to record a still photo or a video, and the capture attribute states which camera to use. By default, data is captured using the rear camera.

These examples request an image from the rear-facing camera:

<input id="standardImageCapture" type="file" accept="image/*" capture>

<input id="rearImage" type="file" accept="image/*" capture="environment">

These examples request a video from the rear-facing camera:

<input id="standardVideoCapture" type="file" accept="video/*" capture>

<input id="rearVideo" type="file" accept="video/*" capture="environment">

These examples capture data from the front camera:

<input id="frontImage" type="file" accept="image/*" capture="user">

<input id="frontVideo" type="file" accept="video/*" capture="user">

CSS Wide Colors

CSS was previously limited to colors in the sRGB gamut. Now, you can specify colors in wider color spaces, such as Display P3, with a new color() function. For example, to set a color in the Display P3 color space:

em { color: color(display-p3 0.25 0.9 0.4); }

You can test for the existence of a display with a wider gamut using CSS media queries:

@media (color-gamut:p3)

{

    .brightred

    {

    color: color(display-p3 1.0 0 0);

    }

}

For more information, see CSS Color Module Level 4 Specification.

CSS Grid Layout

Safari now supports CSS Grid, so you can create complex layouts that respond to viewport constraints. It divides the page into major regions of columns and rows and provides flexibility when describing the relationships of the grid containers.

Updated Behavior of Fixed Position Elements

Safari now uses visual viewports, improving the behavior of fixed and sticky elements with pinch zooming. Focusing an input field no longer disables fixed and sticky positioning in iOS. This behavior is available in Safari and in pages displayed by a WKWebView object. The behavior inside a UIWebView object is unchanged.

Keyboard Input in Fullscreen

In macOS Safari, keyboard input is no longer restricted while the web page is in HTML5 fullscreen.

Improved Web Inspector Debugging

Web Inspector adds support for debugging Web Worker JavaScript threads in the Debugger tab. The Debugger tab also improves debugger stepping with code highlights for the currently-executing and about-to-execute statements. The new stepping highlights make it easier to debug JavaScript with complex control flow or many expressions on a single line.

Reduced Motion Media Query

Use the prefers-reduced-motion media query to create styles that avoid large areas of motion for users that specify a preference for reduced motion in System Preferences.

/* CSS Media Feature */

@keyframes ambient {

  // Keyframes for an ambient animation that is purely decorative.

}

.background {

  animation: ambient 10s infinite alternate;

}

@media (prefers-reduced-motion) {

  // Disable the non-essential animations.

  .background {

     animation: none;

  }

}

/* JavaScript MediaQueryList Interface */

var motionQuery = window.matchMedia('(prefers-reduced-motion)');

if (motionQuery.matches) {

    /* reduce motion */

}

motionQuery.addListener( handleReduceMotionChanged );