杨二

Machine repeats, Human creates

你可能不知道的Safari 10.1(iOS 10.3)Web开发新特性

乔布斯与HTML5

伴随着 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带来了:

  • asyncawait语法,
  • 共享内存对象,包括原子类型(Atomics)和(缓冲数组)Shared Array Buffers
  • String.prototype.padStart,String.prototype.padEnd,String.prototype.valuesString.prototype.entries
  • 允许在函数参数列表和调用中使用逗号

IndexDB 2.0

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

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

自定义元素(Custom Elements)

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

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

游戏手柄(Gamepad)

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

了解更多请参考:Gamepad规范

指针锁

macOS中的Safari通过在元素中使用指针锁,可以让鼠标指针隐藏,同时还可以获取鼠标移动的数据。这个在开发Web游戏中特别有用。指针锁还扩展了MouseEvents接口,新增了movementXmovementY两个属性,即使鼠标移出了可视区域,依然能获取流信息。鼠标锁于某个元素时,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指定了值,那么就相当于重命名了下载文件的名字。

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

了解更多:HTML5中下载资源

HTML媒体捕捉

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

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

改进了fixedsticky元素的定位

当捏合放大(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,所以可能会有词不达意的地方,望见谅。