New features such as CSS Grid, Fetch, Download attribute newly supported by "Safari 10.1" · Apple released by the new specification · New specification


ByIphonedigital

Web browser developed by Apple · The latest version of Safari "Safari 10.1New features and specifications on the developer's page Guides and Sample Code have been released. Because it is often called within iOS application, upgrading Safari will affect later development, but it will change little by little including the application area etc., so it is important to know the future movement is.

Safari 10.1
https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_1.html


◆ Web API
·Fetch
Fetch is a flexible and comprehensive request & response API that is an alternative to "XMLHttpRequest" designed for the web. With the Fetch API you can easily access the response headers and have built - in support for CORS requests. Fetch uses JavaScript Promise to make the result more manageable.

·IndexedDB 2.0
Safari's IndexedDB implementation is fast, completely standards-compliant, and supports new IndexedDB 2.0 new features.

·Custom Elements
Custom Elements provides a mechanism for revealing HTML elements containing custom reaction callbacks that respond to changing values. By combining with the slot-based Shadow DOM API introduced in 2016, Custom Elements can generate reusable components.

·Input Events
Input Events is an API to simplify the process of editing rich text on the web. The Input Events API adds the events before the new input, blocks the default editing behavior, and enhances the input event to the new attribute.

·Pointer lock
In Safari of macOS, you can lock the pointer by user's gesture. Expanded with a mouse event interface such as 'movement X' which can use raw mouse motion data.

When the pointer is locked, the user can see the banner indicating that the mouse cursor is hidden, and you can release the lock of the pointer by pressing the "Escape" key.

·Gamepad
With the Gamepad API, you can enter web content with the connected gamepad device. Game pads have various layouts, such as buttons and joysticks, but with code simplify these to make a standard gamepad layout.

◆ JavaScript
·ECMAScript 2016WhenECMAScript 2017
Support for ECMAScript 2016 and ECMAScript 2017 is available in macOS and iOS Safari. This also adds support for async and await syntax, and supports shared memory objects, Atomics, Shared Array Buffers.

◆ HTML
·Interactive validation formSupport
By supporting a new interactive validation form, it is easy to create a form that will automatically activate user data when the form is submitted. This feature helps you to understand what kind of data the form requires and how to enter the correct information.

· Download attribute of HTML5
As an anchor attribute, you can specify the Download attribute to download a specific file as a link target instead of the page transition link. If you click on the link with the Download attribute specified, it will be downloaded as a file. You can download it by specifying a file name as an option value.

◆ Layout and Rendering
· CSS deep color support
In the past CSS, the color gamut was limited to sRGB. But now you can use color space like "Display P3" in a wider area with new color function. For example, to use the "Display P3" color space, set as follows.

[code]em { color: color(p3 50 250 100); }[/code]


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

· CSS grid layout
SafariCSS grid(Japanese translation here) And will be able to create complex layouts that respond based on viewport restrictions. We divide the page into several areas based on rows and columns and realize the flexibility based on the relationship between the grid containers.

Update behavior on fixed element
For viewport, Safari can also pinch zoom elements that take fixed and sticky values. This eliminates the need to invalidate fixed and sticky in iOS input fields.

◆ Safari Browser Behaviors
· Full screen keyboard input realized
In Safari of macOS, keyboard input is no longer restricted to within the web page, and HTML5 full screen display is also supported.

◆ Web Inspector
· Update debug function by Web Inspector
Added debugging function by Web Worker JavaScript thread on Debugger tab of Web Inspector function. By highlighting code such as where you are currently executing in the Debugger tab, you can make progressive debugging. New gradual highlights make it easier to debug JavaScript that contains complex expressions and many expressions in a single line.

Accessibility
· Decrease motion of Media Query
By using "prefers-reduced-motion" with Media Query, it is possible to create a style that reduces motion in a large area for specific users who are set to reduce motion by system setting.

◆ Safari App Extensions
Safari's extension "Safari App Extensions" makes it possible to dynamically change the image of a toolbar item, check and dynamically change the text of the context menu, and directly communicate with Safari's application extension via an application . Also, Safari's App Extensions are associated with content blockers and can be reloaded and checked for current status.

Safari extensions preferences can display localization descriptions, display names, Safari's App Extensions version numbers, and allow Safari's App Extensions to allow more nuanced messages.

For Safari 10.1Safari Technology PreviewIt is provided for developers.

Related Posts:

in Software, Posted by logu_ii