Safari 9.1 新特性一览

  2016-03-27 00:00:00 CST

  Jingwen Peng

  Web

ScreenShot

2016 年 3 月 22 日的春季发布会按照惯例发布了新款 iPhone 和 iPad,同时更重要的是默默地将 OS X 更新到了 10.11.4 (15E65),其中真正有用的玩意儿应该就只有这个 Safari 9.1 了。从 Safari 9.0 开始,自带的开发者工具就有点异常地好用,再加上它顺滑干净的使用体验,足以让我不再触碰那些浏览 Google 搜索都卡的掉帧的浏览器。如果用苹果的中文腔来说的话,可以这么讲 “让开发者开心的礼物,开了又开”。

下面进入正题。


Web Inspector

更新内容如下:

  • 全新的样式 Visual Styles(视觉效果)编辑界面
  • 全新的 Scope Chain(范围链)监视界面
  • 将 Pseudo Elements(伪元素呈现在 DOM 树上)
  • 提升 Timeline(时间线)的响应速度

伪元素和时间线的更新没什么好讲的,着重说明一下 Visual Styles Editor 和 Scope Chain Watch Expression。

Visual Styles Editor

ScreenShot

视觉效果编辑器其实就是像调整规则一样动态修改页面上元素的样式,来快速调整测试样式效果,只不过视觉效果编辑器对这个操作进行了更进一步的封装,直接把可选的属性以图形化的方式展现出来了。比如文字布局中的左对齐、右对齐和居中样式,可以通过直接点击样式对应的按钮进行修改;再比如字体,也可以像使用 Pages 一样去选取和调整。这样快速修改完属性之后,再将当前的属性值拷贝出来放到自己的源代码里,这种视觉效果编辑真的有点 Sketch 的味道了,样式修改效率可以用逆天来形容了。

Scope Chain Watch Expression

ScreenShot

Scope Chain 属于 Debugger 里面的功能,它可以将当前断点的 Scope 中的变量列举出来,变量的数量以及变量的当前值都一目了然。虽然平常因为编译过的代码量太大,不好设断点,基本上都在用 console.log() 来调试,但是这种能够直接看到 Scope 终有哪些东西的功能确实是好用。9.1 中又增加了一个监视表达式,可以将需要监听的变量表达式加进去,如果当前 Scope 有这个变量,他就会展现出来,方便开发者关注某些关键变量。


页面内容

ScreenShot

都不是什么大新闻:

  • Viewport 中增加 shrink-to-fit=no 属性防止在分屏模式下的网页缩放
  • 对话框界面更改
  • 优化图片渲染
  • HTML 中支持 Picture 元素
  • CSS 支持变量、all 属性、revert 关键字、unset 关键字等

Picture 元素标签

随着分辨率的快速增长,Retina 屏幕现在也基本上已经算是普及了。网页上的图片和视频分辨率也必然随之翻倍,手机和低分辨率的电脑可是遭了殃,而且还会带来巨大的带宽负担。像 App 中针对不同型号的设备端加载不同分辨率的资源一样,在网页上也要这么做。前年在 WWDC 上苹果就展示了如何使用 video 标签针对不通分辨率的浏览器加载不同尺寸的视频,又兴起的可以参考这里 Advanced Media for the Web 。现在 picture 元素也支持这么做了,可以通过 media query 来加载不通的尺寸的图片资源。

这里是示例代码:

1
2
3
4
5
<picture>
    <source media="(min-width: 1000px)" srcset="picture_large.jpg">
    <source media="(min-width: 500px)" srcset="picture_small.jpg">
    <img src="picture_default.jpg">
</picture>

CSS 变量

CSS 变量的权威定义可以参考这里 http://www.w3.org/TR/css-variables/。具体用法是用 -- 开头来定义变量,使用 var() 来引用变量。

比如这样:

1
2
3
4
--secondary-color: #f3f3f3;
.background {
  background-color: var(--secondary-color);
}

但是平常都在用 Sass、Stylus 这种工具,直接写 CSS 的情况真的很少。


Apple Device

和以前一样,增加了一些对自家硬件特性的支持。这次 OS X 下的 Safari 提供了触摸板手势相关的接口,支持 gestureStartgestureChangegestureEnd 事件,以及 event.rotationevent.scale 属性,这里有详细文档。


其他

Safari 的这次更新真的挺大的,但是依然还有很多问题。比如在标签很多的情况下有很大几率变成无响应状态,只能强制关闭;比如在打开 Web Inspector 的一瞬间会卡住几秒钟;再比如有时在捕获很多网络请求的时候直接闪退。总体来说在数据量大的情况下会出现卡顿、无响应、崩溃的情况,但是日常使用起来是几乎没有问题的。像我这样不喜欢切换浏览器的人来说,除了涉及到 Shadow DOM 开发的工作(这种情况真的是少之又少,何况看起来苹果好像并没有支持 Shadow DOM 的打算),一个 Safari 足以应对各种情况。最后喷一下 Chrome,有些网站用 Safari、Firefox 和 Chrome 同时打开的时候,Safari 和 Firefox 浏览呈现的效果几乎一致,但是 Chrome 的内容就会错位。

最后,再看一遍 3 月 22 日发布会上苹果播放的视频 Apple - 40 Years in 40 Seconds

如果您有疑问或建议,请在下方评论区域留言

遵循 BY-NC-ND 协议

评论功能加载中...