伴随着 iOS 10.3 和 macOS Sierra 10.12.4 的更新，一个新版本的Safari也随之而来，其中有许多值得一提的web新特性让前端工程师激动不已，恩，值得唠唠。

这次新版本的发布不仅让web更为强大，同时也简化了当前代码的维护，使得web开发更得心应手。前端工程师利用这些改进能够给用户带来更好的体验，想想都有些小激动呢。

好了，废话不多说，下面看看都有哪些新特性：

Fetch

Fetch是XMLHttpRequest的改进版本。它能够以更简洁的方式异步获取资源，不仅如此，它还利用ECMAScript 2015(ES6)中的Promises,简化和链式响应操作。相对于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);
});

想了解更多请参考：Fetch标准

CSS栅格(CSS Grid Layout)

CSS栅格基于容器的行与列，给前端工程师带来一种强大的新布局方式。通过CSS提供的这种可控的页面布局工具，可以针对不同视口做出复杂的平面排版设计。以前利用CSS中的奇淫技巧才能实现的打印样式，像浮动和Flexbox，现在可以通过CSS栅格轻松实现。

想了解更多请参考：CSS栅格系统: 一种新的布局方式

ECMAScript 2016 & ECMAScript 2017

ECMAScript 2016 和 ECMAScript 2017是Javascript的最新语言标准，Safari 10.1新增了一些支持。当然，对ECMAScript 2016只是做了些微小的工作，毕竟2016版的标准由来已久，但2017版的标准却带来了不小的改进。

ECMAScript 2016带来的改进包括：

求幂运算符（x ** y可以替代Math.pow(x,y)，更简洁了！）
Array.prototype.includes（与Array.prototype.indexOf类似，只不过能对NaN做出识别）

ECMAScript 2017带来了:

async和await语法，
共享内存对象，包括原子类型（Atomics）和（缓冲数组）Shared Array Buffers
String.prototype.padStart,String.prototype.padEnd,String.prototype.values和String.prototype.entries
允许在函数参数列表和调用中使用逗号

IndexDB 2.0

新版本的IndexDB有了更大的提升。它更快，与标准更兼容，并且支持IndexDB 2.0的新特性。IndexedDB 2.0加入了对二进制数据的支持，比如索引键，这样就不用再将其序列化为字符串或者对象数组。不仅如此，还有对象存储和索引重命名，IDBObjectStore的getKey()和IDBIndex的getPrimaryKey()。

想了解更多请参考文档：Indexed Database API 2.0

自定义元素(Custom Elements)

前端工程师不用再依赖Javascript框架来创建可复用组件啦，自定义元素可以轻松做到。和那些内置元素一样，自定义元素也可以通过特性（attributes）设置和获取值，并且还可以通过回调函数响应用户的交互。

了解更多请参考：自定义元素简介

游戏手柄（Gamepad）

Gamepad API 让Web App使用游戏手柄成为可能。在macOS中任何无需通过额外驱动就可以使用的游戏手柄，Web App都可以完美兼容，当然，iOS中的MFi游戏手柄也同样支持。

了解更多请参考：Gamepad规范

指针锁

macOS中的Safari通过在元素中使用指针锁，可以让鼠标指针隐藏，同时还可以获取鼠标移动的数据。这个在开发Web游戏中特别有用。指针锁还扩展了MouseEvents接口，新增了movementX和movementY两个属性，即使鼠标移出了可视区域，依然能获取流信息。鼠标锁于某个元素时，Safari还会显示提示栏通知用户鼠标指针已隐藏。第一次按ESC键，会关闭提示栏，再次按ESC，将会释放指针锁。

更多信息请移步：Pointer Lock 规范

全屏下的键盘输入

WebKit通常会限制在全屏模式下的键盘输入，随着macOS Safari 10.1的更新，这一限制已去掉。

交互式的表单验证

在旧浏览器时代，你知道我指的是哪一款o(╯□╰)o，表单验证一直是件头痛的事情，后来HTML5引入了一些表单元素的特性，解决了一些常见的验证需求，比如必填，约束数据类型等。Safari 10.1更进一步，引入了checkValidity()和reportValidity()两个扩展接口，让提示更标准化，大大减少了Javascript代码。

了解更多：HTML交互式表单验证

输入事件

输入事件简化了富文本输入的实现。新增的beforeinput监听并截获默认的输入行为，并通过新特性强化了该事件。

了解更多：使用输入事件增强编辑体验

HTML5的下载特性

a标签中的download特性标识了是个可下载的链接，用户点击后往往会直接下载资源而非跳转新页面。不仅如此，前端工程师也可以完全使用Javascript来创建blob数据当做文件资源来下载。如果download指定了值，那么就相当于重命名了下载文件的名字。

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

了解更多：HTML5中下载资源

HTML媒体捕捉

在新版的Safari中，HTML媒体捕捉扩展了其捕捉类型，可以使用设备上的相机和麦克来获取用户输入。

1
2
3

<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媒体捕捉

改进了`fixed`和`sticky`元素的定位

当捏合放大（pinch-to-zoom）时，固定和粘连元素的定位表现有了提升，这得归功于视觉窗口(visual viewports)。有了视觉窗口，输入元素获取焦点时不再会禁用固定和粘连元素的定位了。

改进的Web调试

WebKit新增了针对Web Worker的调试支持，同时对正在调试和即将执行的语句高亮，这样，就能清楚看出哪条代码即将执行，在一些控制流程非常复杂或者多条语句写在了一行中，这种改进的体验非常棒。

更详细的介绍请移步：Javascript调试改进

CSS全范围色彩（Wide-Gamut Colors）

现在的设备能够支持色域更广的颜色。随着新版本Safari的发行，前端工程师能够扩展出更多的色彩想象力，包括Display P3色彩域。通过color-gamut媒体查询可以测试出显示器是否支持该特性，然后用CSS新增的color()函数，定义出新的颜色。

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

更多请访问：CSS颜色模块标准

后记

这篇文章翻译自New Web Features in Safari 10.1，内容略有删减，有些特性我也没搞懂，比如color-gamut，所以可能会有词不达意的地方，望见谅。