Chrome 57 的新功能

  • Chrome 57 增加了对 display: grid(新的 CSS 网格布局规范)的支持。
  • 现在,您可以使用新的 Media Session API 自定义锁定屏幕和通知上的用户输入,并对其做出响应。
  • 还有更多

我是 Pete LePage,让我们深入了解 Chrome 57 中面向开发者的新变化!

CSS 网格布局

flexbox 是一款强大的布局工具。它可以实现许多复杂的布局,但只能在一个维度上进行布局。Chrome 57 添加了对 display: grid(新的 CSS 网格布局规范)的支持,从而添加了一款强大的全新工具,用于创建基于网格的二维布局系统,该系统经过优化,可实现响应式界面设计。

网格中的元素可以跨越多列或多行。CSS 网格中的区域也可以命名,这样布局代码就更易于理解。

Surma 撰写了一篇更新帖子,介绍了该功能。如果您准备深入了解,请访问 Rachel Andrew 的网站:GridByExample.com

Media Session API

Web 媒体应用缺少的一项功能是无法与移动设备上的核心媒体体验深度集成。在 Android 版 Chrome 中,您现在可以使用新的 Media Session API 使用媒体内容自定义锁屏和通知。

通过向浏览器提供有关正在播放的内容的metadata,您可以创建包含标题、音乐人、专辑名称和海报图片等信息的丰富锁屏消息。您还可以监听和响应用户对通知本身执行的操作,例如跳转或跳过。

如果您想快速上手,可以参阅 Francois 的更新帖子,或查看 GitHub 上的官方 Chrome 媒体会话示例代码库

等等!

还有更多功能!

  • 我们对 Payment Request API 进行了一些 改进
  • 您可以使用 caret-color 属性指定文本输入光标的颜色。
  • 您可以使用新的 text-decoration 属性指定线条颜色和样式等视觉效果。
  • Fetch API Response 类现在支持 .redirected 属性,有助于避免不可信的响应并降低打开重定向的风险。
  • 在 M38 中被废弃后,所有带有 -webkit- 前缀的 IndexedDB 全局别名均已移除。
  • 我最喜欢的是新增的 padStartpadEnd 格式设置方法,它们可简化对齐控制台输出或输出固定位数数字时的字符串内边距设置。

以上仅列出了 Chrome 57 中面向开发者的部分变更。

向 Igalia 致敬

最后,衷心感谢 Igalia 的工程师和团队,他们在 Blink 上做了出色的工作。他们在推出新的 CSS 网格和 caret-color 功能方面发挥了重要作用。

随时掌握最新动态

如果您想随时了解 Chrome 的最新动态并了解即将推出的功能,请务必订阅我们的频道,或在 Twitter 上关注 @ChromiumDev。请务必观看 Chrome 开发者大会的视频,深入了解 Chrome 团队正在开发的一些出色功能。

我是 Pete LePage,Chrome 58 发布后,我会立即在这里为您介绍 Chrome 中的新变化!