开发者社区> 晚来风急> 正文

您不能错过的 Safari 10.0 新特性

简介:
+关注继续查看

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

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]

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Chrome 87 新特性解读,多年来 Chrome 性能最大提升!
今天 Chrome 更新了 87 最新版,这是今年最后一次 Chrome 更新了,这个版本是多年来 Chrome 性能获得最大提升的一次,开发者工具也进行了大幅度更新。 有用户认为,原本 Chrome 的性能问题诟病已久,然而在新 Edge 出来了以后,性能突然就提升了,这显然是谷歌方面受到了 Edge 市场份额暴增带来的压力。 另外,在 Mac 上的 Chrome 还更新了图标,这应该是为了适配 Big Sur 专门进行的设计。
283 0
Safari 14 来了,它还有机会吗?
Safari 14 来了,它还有机会吗?
116 0
WebKit 官宣 Safari 16 Beta 版 Web 新功能!开发者“你在强迫让 iOS 浏览器都用 Safari ?”
WebKit 官宣 Safari 16 Beta 版 Web 新功能!开发者“你在强迫让 iOS 浏览器都用 Safari ?”
136 0
x3d
居然是Firefox没有抛弃我们
面向企业级市场,一款网页浏览器的很多特性不是说改就改,说丢弃就丢弃。就像微软不能抛弃IE一样,Firefox也有类似的定位和使命。 Firefox即尝试提供企业级市场所需的特性稳定的软件版本(LTS),又是Web新技术的实验田,从推广W3C组织的Web标准(虽然有段时间它的内核是对Web标准支持程度最低的)、支持最新Web标准,到WebGL、WebVR等技术领域,都是领导者;当然,它目前的市场份额是比较低了。
943 0
15个必须知道的chrome开发者技巧
来源:http://www.admin10000.com/document/6159.html 在Web开发者中,Google Chrome是使用最广泛的浏览器。六周一次的发布周期和一套强大的不断扩大开发功能,使其成为了web开发者必备的工具。你可能已经熟悉了它的部分功能,如使用console和debugger在线编辑CSS。在这篇文章中,我们将分享15个有助于改进你的开发流程的
1130 0
Apple 系统正式版要发布了,有你期待的功能吗?
Apple操作系统每年例行升级时间到,每年都说的那么牛B,不管是IOS还是Mac os功能已经曝光的差不多了,你需要的功能有出现吗? 每年对系统的升级,其实还是很期待的,但是发现,Apple的系统现在越来越关注一些高科技,很多接地气的使用功能一直没有,还是让人很失望的。
853 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载