杨二

Machine repeats, Human creates
分类
归档
标签
关于

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

2017-3-31 它山之石前端翻译html5

乔布斯与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带来了:

  • 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指定了值，那么就相当于重命名了下载文件的名字。

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

改进了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);
  }
}

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

后记

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

分类
归档
标签
关于