Safari 9.1 中的新 Web 功能

上周,随着 iOS 9.3 和 OS X El Capitan 10.11.4 的发布,新版 Safari 也随之推出。iOS 9.3 上的 Safari 和 OS X 上的 Safari 9.1 是重要版本,其中包含了 WebKit 的许多令人兴奋的 Web 功能。这些 Web 功能被认为是准备就绪的,我们迫不及待地想与用户和开发者们分享它们。

除了新的 Web 功能外,此版本还改进了人们体验 Web 的方式,在 iOS 上响应更灵敏,在 OS X 上新增了手势,并且 JavaScript 对话框更加安全。开发者将会赞赏 Web Inspector 中提供的额外改进、性能和新工具。

以下是对次版本为何如此重要的简要回顾。

Web 功能

Picture 元素

<picture> 元素是一个容器,用于将同一图片的不同 <source> 版本分组。它提供了一种回退方法,以便浏览器可以根据设备能力(如像素密度和屏幕尺寸)选择正确的图片。这对于使用具有内置优雅降级到良好支持图片格式的新图片格式非常方便。在 <source> 元素的 media 属性中指定媒体查询的能力,将图片的艺术指导带入了响应式网页设计。

有关 <picture> 元素的更多信息,请 查看 HTML 5.1 规范

CSS 变量

CSS 变量,正式名称为 CSS Custom Properties,允许开发者减少代码重复和代码复杂性,并使 CSS 的维护变得容易得多。最近我们谈到了 Web Inspector 如何利用 CSS 变量,以减少代码重复并精简了许多 CSS 规则。

您可以阅读更多关于 WebKit 中的 CSS 变量 的信息。

字体特性

CSS 字体特性允许您使用字体中可用的特殊文本样式和效果,例如连字和小型大写字母。这些不是浏览器生成的伪造表示,而是字体作者设计的预期样式。

有关更多信息,请阅读 CSS 字体特性 博客文章。

Will Change 属性

CSS 的 will-change 属性允许您提前告知浏览器某个元素可能发生的变化。这个提示让浏览器提前知道,以便它们可以进行引擎优化,从而提供流畅的性能。

CSS Will Change Module Level 1 规范 中阅读更多关于 will-change 的信息。

OS X 的手势事件

手势事件已在 WebKit for iOS 中可用,现在 Safari 9.1 也支持 OS X 上的手势事件。手势事件用于检测触控板上的捏合和旋转操作。

查看 GestureEvent 类参考 以获取更多详情。

浏览改进

iOS 上的快速点按

WebKit for iOS 有一个 350 毫秒的延迟,用于检测双击以放大在移动设备上显示过小的内容。随着 Safari 9.1 的发布,iOS 上的 WebKit 对于为移动视口尺寸设计的 Web 内容取消了这一延迟。

阅读关于 iOS 上更灵敏的点按 的信息,了解如何确保网页获得此快速点按行为的详细信息。

JavaScript 对话框

为了保护用户免受不良行为者以不道德的方式使用 JavaScript 对话框,Safari 9.1 中的对话框经过重新设计,使其外观和工作方式更像 Web 内容。这种新行为意味着对话框不再阻止用户导航离开或关闭页面。相反,用户可以更清楚地理解对话框来自他们正在查看的网页,并轻松地关闭它们。

有关更多详细信息,请参阅 Safari 的新功能 中的 显示对话框 部分。

Web Inspector 改进

Web 开发者将会喜欢 Web Inspector 在调试和样式设置方面的一些值得注意的新增强功能。时间线中更快的性能意味着调试复杂的页面和 Web 应用比以往任何时候都更容易。Scope Chain 侧边栏中新的 Watch Expressions 部分帮助开发者查看流经 JavaScript 环境的数据。

在 Elements 标签页中,可以从 DOM 树访问伪元素(如 ::before::after),从而可以直接检查和设置它们的样式。

Web Inspector 还增加了一个 Visual Styles 侧边栏,它提供了修改网页样式的可视化工具,而无需记住 CSS 的所有属性和元素。这使得设计师和开发者都能更容易地进行网页样式设置,让他们参与探索不同的样式。

使用 Visual Styles 侧边栏编辑 CSS 中了解更多关于它如何工作的信息。

反馈

对于一个点版本来说,这包含了大量的增强和改进。除了 OS X El Capitan,Safari 9.1 也可在 OS X Yosemite 和 OS X Mavericks 上使用——将所有这些改进带给更多用户。我们很想听听您最喜欢的新功能。请将您的推文发送给 @webkit@jonathandavis,并告知我们!