您不能错过的 Safari 10.0 新特性

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

Web APIs

支持IndexedDB

Safari 10.0 对IndexedDB的HTML5本地存储方式实现完整支持W3C标准。通过该API,开发者可以在Web应用的客户端实现离线存储,或者缓存可观数量的结构化数据。

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

通过Javascript操作(如下)

document.execCommand('cut')  //剪切
document.execCommand('copy') //拷贝

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

小编说:这样就不用麻烦地通过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 以及我们以后将会讨论的一些技术,使得开发人员可以创建诸如

这样自定义的一级标签。总的来说,这些新标签和相关的 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。

var context = canvas.getContext('webgl', { antialias: false});

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

var context = canvas.getContext('webgl', { alpha: false});// 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属性和图片元素的样式控制,例如:

@media (color-gamut: p3) { … }

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内容中。

文章转载自 开源中国社区[http://www.oschina.net]

时间: 2024-10-28 06:01:42

您不能错过的 Safari 10.0 新特性的相关文章

背水一战 Windows 10 (43) - C# 7.0 新特性

原文:背水一战 Windows 10 (43) - C# 7.0 新特性 [源码下载] 背水一战 Windows 10 (43) - C# 7.0 新特性 作者:webabcd 介绍背水一战 Windows 10 之 C# 7.0 新特性 介绍 C# 7.0 的新特性 示例1.C# 7.0 示例 1: out 变量, 数字语法改进, 值类型的异步返回CSharp7/Demo1.xaml.cs /* * C# 7 示例 1 * out 变量, 数字语法改进, 值类型的异步返回 */ using S

背水一战 Windows 10 (1) - C# 6.0 新特性

原文:背水一战 Windows 10 (1) - C# 6.0 新特性 [源码下载] 背水一战 Windows 10 (1) - C# 6.0 新特性 作者:webabcd 介绍背水一战 Windows 10 之 C# 6.0 新特性 介绍 C# 6.0 的新特性 示例1.C# 6.0 示例 1: 自动属性支持初始化, 字符串嵌入的新方式, 通过 Using Static 引用静态类, nameof 表达式CSharp6/Demo1.xaml.cs /* * C# 6 示例 1 * 自动属性支持

返璞归真 asp.net mvc (10) - asp.net mvc 4.0 新特性之 Web API

原文:返璞归真 asp.net mvc (10) - asp.net mvc 4.0 新特性之 Web API [索引页][源码下载] 返璞归真 asp.net mvc (10) - asp.net mvc 4.0 新特性之 Web API 作者:webabcd 介绍asp.net mvc 之 asp.net mvc 4.0 新特性之 Web API 开发一个 CRUD 的 Demo,服务端用 Web API,并使其支持 jsonp 协议,客户端用 jQuery 示例1.自定义一个 JsonMe

返璞归真 asp.net mvc (13) - asp.net mvc 5.0 新特性

原文:返璞归真 asp.net mvc (13) - asp.net mvc 5.0 新特性 [索引页][源码下载] 返璞归真 asp.net mvc (13) - asp.net mvc 5.0 新特性 作者:webabcd 介绍asp.net mvc 之 asp.net mvc 5.0 新特性 MVC5, WebAPI2(Attribute Routing, Cross Origin Request Sharing, OData), SignalR, SPA(Single Page Appl

MySQL 5.0新特性教程 存储过程:第一讲

mysql|存储过程|教程 作者:mysql AB;翻译:陈朋奕 Introduction 简介 MySQL 5.0 新特性教程是为需要了解5.0版本新特性的MySQL老用户而写的.简单的来说是介绍了"存储过程.触发器.视图.信息架构视图",在此感谢译者陈朋奕的努力. 希望这本书能像内行专家那样与您进行对话,用简单的问题.例子让你学到需要的知识.为了达到这样的目的,我会从每一个细节开始慢慢的为大家建立概念,最后会给大家展示较大的实用例,在学习之前也许大家会认为这个用例很难,但是只要跟着

MySQL 5.0新特性教程 存储过程:第一讲

Introduction 简介 MySQL 5.0 新特性教程是为需要了解5.0版本新特性的MySQL老用户而写的.简单的来说是介绍了"存储过程.触发器.视图.信息架构视图",在此感谢译者陈朋奕的努力. 希望这本书能像内行专家那样与您进行对话,用简单的问题.例子让你学到需要的知识.为了达到这样的目的,我会从每一个细节开始慢慢的为大家建立概念,最后会给大家展示较大的实用例,在学习之前也许大家会认为这个用例很难,但是只要跟着课程去学,相信很快就能掌握. Conventions and St

返璞归真 asp.net mvc (11) - asp.net mvc 4.0 新特性之自宿主 Web API, 在 WebForm 中提供 Web API, 通过 Web API 上传文件, .net 4.5 带来的更方便的异步操作

原文:返璞归真 asp.net mvc (11) - asp.net mvc 4.0 新特性之自宿主 Web API, 在 WebForm 中提供 Web API, 通过 Web API 上传文件, .net 4.5 带来的更方便的异步操作 [索引页][源码下载] 返璞归真 asp.net mvc (11) - asp.net mvc 4.0 新特性之自宿主 Web API, 在 WebForm 中提供 Web API, 通过 Web API 上传文件, .net 4.5 带来的更方便的异步操作

[WCF 4.0新特性] 路由服务[实例篇]

在本篇文章中,我们将通过一个具体的实例来演示如何通过路由服务.在这个例子中,我们会创建连个简单的服务HelloServie和GoodbyeService.假设客户端不能直接调用这两个服务,需要使用到路由服务作为两者之间的中介.整个消息路由的场景如下图所示,中间的GreetingService.svc就是代表路由服务,而两个目标服务则通过HelloServie.svc和GoodbyeService.svc表示.路由服务使用的消息筛选器EndpointAddressMessageFilter,即根据

[WCF 4.0新特性] 标准终结点与无(.SVC)文件服务激活

今天介绍WCF 4.0的另外两个新特性:标准终结点(Standard Endpoint)和无(.SVC)文件服务激活(File-Less Activation).前者实现了针对典型通信场景对终结点的定制,后者让你在进行IIS/WAS的服务寄宿中无须定义.svc文件. 一.标准终结点 我们知道,绑定的本质就是一系列相关绑定元素的有序集合,而系统绑定就是基于若干典型的通信场景对相关绑定元素的整合.WCF通过系统绑定对绑定元素进行了定制,那么能否在终结点级别对组成该终结点的ABC(地址.绑定和契约)也