您不能错过的 Safari 10.0 新特性

作为一名前端，您可以忽略昨晚 wwdc 的更新，但您一定不能错过这篇文章。safari 10.0 随之发布，带来了不少新的特性，为开发者带来福音。小编参照官方文档，为大家整理翻译，便于阅读，么么哒。

web apis

支持indexeddb

safari 10.0 对indexeddb的html5本地存储方式实现完整支持w3c标准。通过该api，开发者可以在web应用的客户端实现离线存储，或者缓存可观数量的结构化数据。

编程化实现剪切和拷贝功能

通过javascript操作（如下）

能够编程化地实现剪切和拷贝文本到剪贴板。

小编说：这样就不用麻烦地通过flash来实现了，赞。

cps 2.0

内容安全策略（content security policy，简称cps）增强支持至2.0版本标准。

shadow dom

shadow dom的1.0版本为web组件提供了实现基础。你可以放心地通过shadow dom来封装功能，从而使得其与页面内的脚本或样式不互相影响。

小编说：“shadow dom 是一个 html 的新规范，其允许开发者封装自己的 html 标签、css 样式和 javascript 代码。shadow dom 以及我们以后将会讨论的一些技术，使得开发人员可以创建诸如

<video></video>

这样自定义的一级标签。总的来说，这些新标签和相关的 api 被称为 web components”——引自《shadow dom：简介》。

es6

在os x以及ios系统上的safari已经对被誉为javascript语言重大变革的——ecmascript 2015 标准（亦称为es 6）实现完整支持。

es 国际化

融合了ecmascript 国际化 api 标准，也就是ecma-402，支持自动根据客户端的用户语言和区域设置数字格式化、货币、日期时间格式化等功能，又或者是根据所提供的用户语言和区域来设置。

dom 兼容性改进

dom兼容性改进使得safari 10.0 对w3c测试通过率得到提高，与其他浏览器能够更好地兼容。

3d touch 事件

在ios上带来了3d touch 事件——touchforcechange事件，该事件当且仅当在压感变化时被触发，并且该事件等价于os x上的webkit私有的webkitmouseforcechanged事件。事件中的touch对象的force属性值变化范围从0.0到1.0。

webgl

webgl渲染上下文参数选项antialias目前在ios上得到支持，默认值为true。

webgl渲染上下文参数选项alpha目前在ios上支持设置为false。

单个页面允许运行的webgl上下文受到限制，限制总数为16个。当超出这个限制阈值时，若继续增加新的上下文会导致最早创建的上下文被销毁。

media

在ios上内嵌自动播放视频

webkit-playsinline属性得到支持后，在iphone上的safari允许视频内嵌播放。如果属性没有被设置时，视频会默认全屏播放，但用户可以通过关闭按钮退出全屏，而视频会继续内嵌播放。

在ios上，如果视频没有滑动条或者禁用滑动条时，在页面加载后会自动播放。

在os x上实现画中画功能

在os x上的safari也带来了画中画功能，使得用户能够将视频独立出来观看、任意调整窗口大小，或者置前于其他程序窗口，甚至可以在切换桌面时保持在当前屏幕。

开发者在自定义html5 video元素时，可以通过javascript的呈现模式api（presentation mode api）来为

元素增加画中画功能。

text features

woff 2.0支持

新的woff2.0改进了网页字体压缩，所以网页在加载字体时将花费更少的宽带。

字体加载

－web开发者们能够依据css font loading module level 3 规范来通过脚本应用和加载字体，同时还可以跟踪字体的加载状态。

当且仅当渲染文本的字符符合unicode范围标准时，网页字体才会被下载。

layout and rendering

css3的object-position属性支持

object-position属性指定了替换元素（如video、img、object）在其包含容器中的对齐方式。另外，object-position属性与 background-position属性的使用非常相似。

支持svg的路径裁切

如css shapes level 2 specification中的规范所说，你可以裁切通过path元素实现的各种各样的形状，甚至包括贝塞尔曲线路径以及evenodd路径填充规则。

支持 #rbga 以及 #rrggbbaa的颜色值写法

safari支持css color level 4 specification所规范描述的#rbga 以及 #rrggbbaa形式的颜色值写法。

border-image属性新值支持

对于border-image属性值round和space已经得到支持。

image-rendering属性新值支持

对于image-rendering属性值crisp-edges和pixelated已经得到支持，同时crisp-edges的带有webkit前缀的等效写法是-webkit-crisp-edges或者是 -webkit-optimize-contrast。

right-to-left(从右往左书写的)语言支持

由于rtl语言的支持，因此通过directioncss属性，可以相应地调整滚动条的定位方式和表单的外观样式控制方式。

媒体查询对广色域属性的支持

媒体查询增加支持color-gamut属性，实现对在广色域显示屏设备上的css属性和图片元素的样式控制，例如：

css break相关属性新增

break-after、break-before、break-insidecss属性目前已得到支持

不再需要-webkit-前缀的css属性

以下css特性已经得到支持，不再需要-webkit-前缀：

filter

cross-fade

image-rendering

web inspector (web检查器)

webdriver 支持

在os x上的safari已经实现支持webdriver，能够让开发者实现web内容的自动化测试。它提供了一系列接口来操作dom元素和控制浏览器的表现行为。你可以在safari的菜单中的开发选项里选择启用远程自动化测试(remote automation)，然后通过/usr/bin/safaridriver来启动服务器。更多的可用库信息可在selenium webdriver进行查阅。

内存调试

web检查器新版的时间线(timelines)可以实现web应用内存的使用情况的可视化检查以及绘制时堆分配的时间快照。这些工具能够帮助开发者更好地定位优化web应用的内存性能问题。

更快的采样分析器（？）

当调试工具被禁用时，新版的javascript分析器在高分屏下执行代码进行采样，有着更高性能。这让脚本可以全速即时编译和运行，使记录的运行时间更加准确。

native apis

在web上调用apple pay功能

使用apple pay，开发者可以为用户提供更安全、更便捷的支付环境来进行购物体验，用户只需要在iphone上通过touch id或者apple watch就可以完成支付。为了能够在网页上调用apple pay功能，你可以点击applepay js framework reference了解更多。

wkwebview 页面预览行为

更新后的wkwebview api支持对超链接的预览，为用户呈现自定义视图。通过这个api，你可以通过peek和pop手势来触发预览视图，避免跳转去safari，除此之外，你还可以自定义预览行为。这些新方法属于wkuidelegate类的内容—webview:shouldpreviewelement:,webview:previewingviewcontrollerforelement:defaultactions:, 以及webview:commitpreviewingviewcontroller:

在ios 10.0版本之后，wkwebview的allowslinkpreview属性值默认为yes

safari视图控制器

在ios 10，safari视图控制器允许为视图栏的背景自定义颜色。再加上在ios 9时已经允许可以为ui控制元素自定义颜色，开发者可以通过完全地自定义safari视图控制器外观，给予用户更好的统一外观的app内置应用设计体验。

wkwebview中的键盘展示

在ios 10，在键盘呼出时，应通过更新wkwebview对象的window.innerheight属性而不是调用resize事件，以使得更加吻合在safari的原生表现。

safari 应用插件

现在你可以写os x原生safari应用插件并把它放到apple store上挣钱。之前给 ios 写的广告拦截器（content blockers） 还可以很轻松地导出成 os x 版本，作为safari的插件。同时，注入的脚本和应用的样式也可以应用到web内容中。