Safari 10.1 中的新 Web 特性

随着 iOS 10.3 和 macOS Sierra 10.12.4 的发布，新版 Safari 也已推出。iOS 10.3 上的 Safari 和 macOS 上的 Safari 10.1 新增了来自 WebKit 的许多重要 Web 特性和改进，对此我们感到非常兴奋。

虽然此版本让 Web 平台更强大、更有能力，但它也让 Web 开发变得更简单，简化了代码的日常维护。我们期待看到 Web 开发者如何将这些改进转化为更好的用户体验。

继续阅读，快速了解此版本中包含的特性。

Fetch

Fetch 是 XMLHttpRequest 的现代替代方案。它提供了一种更简单的方法来通过网络异步请求资源。它还利用了 ECMAScript 2015 (ES6) 中的 Promise，以便方便地链式处理响应。与 XMLHttpRequest 相比，Fetch API 使代码更整洁、更易读、更易于维护。

let jsonURLEndpoint = "https://svn.webkit.org/repository/webkit/trunk/Source/WebCore/features.json";
fetch(jsonURLEndpoint, {
    method: "get"
}).then(function(response) {
    response.json().then(function(json) {
        console.log(json);
    });
}).catch(function(error) {
    console.error(error);
});

在博客文章《关于 Fetching Bytes 的几点说明》中了解更多信息。

CSS 网格布局

CSS 网格布局为 Web 作者提供了一种基于容器中列和行网格的强大新布局系统。这是提供 CSS 中易于管理的页面布局工具方面迈出的重要一步，使复杂的图形设计能够响应视口变化。作者可以使用 CSS 网格布局更容易地实现通常在印刷品中看到的设计，而这些设计以前需要利用 floats 和 Flexbox 等现有 CSS 工具中的布局技巧来实现。

在博客文章《CSS 网格布局：Web 的新布局模块》中阅读更多内容。

ECMAScript 2016 和 ECMAScript 2017

WebKit 在 Safari 10.1 中新增了对 ECMAScript 2016 和 ECMAScript 2017 的支持，这是 JavaScript 语言的最新标准修订版。ECMAScript 2016 添加了一些小的增量改进，但 2017 标准为 JavaScript 带来了几项实质性改进。

ECMAScript 2016 包括幂运算符（x ** y 而不是 Math.pow(x, y)）和 Array.prototype.includes。Array.prototype.includes 类似于 Array.prototype.indexOf，不同之处在于它可以查找包含 NaN 的值。

ECMAScript 2017 带来了 async 和 await 语法，包括 Atomics 和 Shared Array Buffers 在内的共享内存对象，String.prototype.padStart，String.prototype.padEnd，Object.prototype.values，Object.prototype.entries，并允许在函数参数列表和调用中使用尾随逗号。

IndexedDB 2.0

WebKit 的 IndexedDB 实现在此版本中有了显著改进。现在它更快、更符合标准，并支持新的 IndexedDB 2.0 特性。IndexedDB 2.0 新增了对二进制数据类型作为索引键的支持，因此您不再需要将其序列化为字符串或数组对象。它还带来了对象存储和索引重命名，IDBObjectStore 上的 getKey()，以及 IDBIndex 上的 getPrimaryKey()。

在《Indexed Database API 2.0》规范中了解更多信息。

自定义元素

自定义元素使 Web 作者能够创建由其自己的 HTML 元素定义的、无需依赖 JavaScript 框架的可重用组件。与内置元素一样，自定义元素可以在其属性中进行通信和接收新值，并使用反应回调对属性值的更改做出响应。

如需更多信息，请阅读博客文章《自定义元素简介》。

游戏手柄

Gamepad API 使您可以在 Web 应用中使用游戏控制器。任何无需额外驱动程序即可在 macOS 上工作的游戏手柄都可以在 Mac 上工作。所有 MFi 游戏手柄都在 iOS 上得到支持。

在《Gamepad 规范》中阅读更多关于此 API 的信息。

指针锁定

在 macOS 上的 Safari 中，对元素请求指针锁定使开发者能够隐藏鼠标指针并访问原始鼠标移动数据。这对于在 Web 上创建游戏的作者特别有帮助。它使用 movementX 和 movementY 属性扩展了 MouseEvents 接口，即使移动超出可见范围的边界，也能提供信息流。在 Safari 中，当指针被锁定在元素上时，会显示一个横幅，通知用户鼠标光标已隐藏。按一次 Escape 键会关闭横幅，再次按 Escape 键将释放元素上的指针锁定。

您可以从《指针锁定规范》中获取更多信息。

全屏模式下的键盘输入

WebKit 以前在 HTML5 全屏模式下限制键盘输入。通过 macOS 上的 Safari 10.1，在使用 HTML5 全屏模式时，WebKit 取消了键盘输入限制。

交互式表单验证

通过支持 HTML 交互式表单验证，作者可以创建带有数据验证约束的表单，这些约束在表单提交时由浏览器自动检查，无需使用 JavaScript。这极大地简化了确保客户端用户良好数据输入的复杂性，并最大限度地减少了对复杂 JavaScript 的需求。

在 WebKit 中阅读更多关于HTML 交互式表单验证的信息。

输入事件

输入事件简化了在 Web 上可编辑内容区域实现富文本编辑体验。Input Events API 添加了一个新的 beforeinput 事件来监控和拦截默认的编辑行为，并使用新属性增强了 input 事件。

您可以阅读更多关于使用输入事件增强编辑功能的信息。

HTML5 下载属性

用于锚元素的 download 属性现在在 macOS 上的 Safari 10.1 中可用。它表明链接目标是一个下载链接，应该下载文件而不是导航到链接的资源。它还使开发者能够完全从 JavaScript 创建一个将 blob 数据下载为文件的链接。点击带有 download 属性的链接会使目标资源被下载为文件。download 属性的可选值可用于为文件提供建议的名称。

<a href="https://webkit.ac.cn/favicon.ico" download="webkit-favicon.ico">Download Favicon</a>

在 HTML 规范的下载资源部分了解更多信息。

HTML 媒体捕获

在 iOS 上的 Safari 中，HTML Media Capture 扩展了表单中的文件输入控件，允许用户使用设备上的摄像头或麦克风捕获数据。

文件输入可用于捕获图像、视频或音频

<input name="imageCapture" type="file" accept="image/*" capture>
<input name="videoCapture" type="file" accept="video/*" capture>
<input name="audioCapture" type="file" accept="audio/*" capture>

更多详细信息可在《HTML Media Capture》规范中找到。

改进的固定和粘性元素定位

使用双指缩放时，通过“视觉视口”方法改进了固定和粘性元素的定位行为。使用视觉视口模型，聚焦触发屏幕键盘的输入字段不再禁用 iOS 上 Safari 中的固定和粘性定位。

改进的 Web Inspector 调试

WebKit 团队在 Web Inspector 的 Debugger 选项卡中新增了对调试 Web Worker JavaScript 线程的支持。调试器单步执行也有所改进，当前执行和即将执行的语句都有高亮显示。这些高亮使得在调试过程中将要执行的代码更加清晰，特别是对于控制流复杂或单行有多个表达式的 JavaScript。

在 Web Inspector 中了解更多关于JavaScript 调试改进的信息。

CSS 广色域颜色

现代设备支持更广泛的颜色范围。现在，Web 作者可以在广色域颜色空间中使用 CSS 颜色，包括 Display P3 颜色空间。新的 color-gamut 媒体查询可用于测试显示器是否能够显示给定的颜色空间。然后，使用新的 CSS color() 函数，开发者可以在特定颜色空间中定义颜色。

@media (color-gamut:p3) {
    .brightred {
        color: color(display-p3 1.0 0 0);
    }
}

更多信息请参见《CSS Color Module Level 4》标准规范。

prefers-reduced-motion 媒体查询

新的 prefers-reduced-motion 媒体查询允许使用动画的开发者为那些在存在大面积运动或剧烈移动时可能引发身体不适的用户做出调整。通过 prefers-reduced-motion，作者可以为那些在系统设置中设置了降低动画偏好的用户创建避免运动的样式。

@keyframes decorativeMotion {
    /* Keyframes for a decorative animation */
}

.background {
    animation: decorativeMotion 10s infinite alternate;
}

@media (prefers-reduced-motion) {
    .background {
        animation: none;
    }
}

阅读更多关于响应式运动设计的信息。

反馈

我们期待开发者利用这些特性为用户创造更好的体验。这些改进适用于运行 iOS 10.3 和 macOS Sierra 10.12.4 的用户，以及适用于 OS X Yosemite 和 OS X El Capitan 的 Safari 10.1。

这些特性中的大部分也在过去几个月的 Safari 技术预览版中进行了预览。此版 Safari 中包含的更改涵盖了 Safari 技术预览版 14、15、16、17、18、19 和 20。您可以下载最新的 Safari 技术预览版，以便始终走在未来 Web 特性的前沿。

最后，我们非常乐意听取您的意见！请发送推文至 @webkit 或 @jonathandavis，告诉我们这些特性中哪些对您的 Web 设计或开发工作影响最大。