Chrome 115 的新变化

Adriana Jara

以下是您有必要知道的信息：

  • 使用 ScrollTimeline 和 ViewTimeline 创建滚动驱动的动画，从而增强用户体验。
  • 围栏框架与其他 Privacy Sandbox API 搭配使用，来嵌入相关内容，同时防止不必要的上下文共享。
  • 借助 Topics API，浏览器可以在保护隐私的同时与第三方分享有关用户兴趣的信息。
  • 还有许多更多内容。

我是 Adriana Jara。让我们一起深入了解一下 Chrome 115 会为开发者带来哪些新变化。

滚动条驱动的动画

滚动条驱动的动画是 Web 上常见的用户体验模式。滚动驱动的动画与滚动容器的滚动位置相关联。这意味着，当您向上或向下滚动时，链接的动画会以直接响应的形式向前或向后播放。

以下示例演示了一些使用场景。例如，您可以创建会随着滚动而移动的朗读指示器：

文档上方的阅读指示器，由滚动驱动。

滚动条驱动的动画还可以创建在进入视图时淡入的元素：

此页面上的图片在进入视图时淡入。

默认情况下，附加到元素的动画在文档时间轴上运行。其出发时间在网页加载时从 0 开始，随着时钟时间的推进，开始逐渐增加。这是默认的动画时间轴，到目前为止，它是您能访问的唯一动画时间轴。

滚动驱动的动画规范定义了两种新的时间轴类型：

  • Scroll Progress Timeline（滚动进度时间轴）：与滚动容器沿特定轴的滚动位置相关联的时间轴。
  • 查看进度时间轴：与特定元素在其滚动容器中相对位置的时间轴。

以下代码示例使用匿名的滚动进度时间轴来创建固定在视口顶部的阅读进度指示器。

<body>
  <div id="progress"></div>
  …
</body>

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

如需了解所有详细信息和更多示例，请阅读滚动驱动动画。

围栏框架

Privacy Sandbox 计划旨在打造各种技术，在保障用户在线隐私的同时为开发者提供工具，帮助其打造蓬勃发展的数字业务。

其中许多提案旨在满足没有第三方 Cookie 或其他跟踪机制的跨网站用例。例如：

为了保护隐私，其中一些 API 需要用新的方式来嵌入内容。这个解决方案称为围栏框架。

围栏框架与其他 Privacy Sandbox 提案搭配使用，可在一个页面中显示来自不同存储分区的文档。

围栏框架是嵌入式内容的 HTML 元素，与 iframe 类似。与 iframe 不同，围栏框架会限制与其嵌入上下文的通信，以允许框架访问跨网站数据，而无需与嵌入上下文共享数据。

同样，嵌入上下文中的任何第一方数据都不能与围栏框架共享。

特征 iframe fencedframe
嵌入内容 有 有
嵌入的内容可以访问嵌入上下文 DOM 有 否
嵌入上下文可以访问嵌入的内容 DOM 有 否
可观察属性，例如 name 有 否
网址 (http://example.com) 有 是（具体取决于用例）
由浏览器管理的不透明来源 (urn:uuid) 否 有
访问跨网站数据 否 是（具体取决于用例）

例如，假设 news.example（嵌入上下文）将 shoes.example 中的广告嵌入到围栏框架中。news.example 不能外泄 shoes.example 广告的数据，shoes.example 也不能从 news.example 获取第一方数据。

存储分区之前和之后的状态比较。

请参阅这些文章，了解有关围栏框架、Protected Audience API、共享存储空间等的文档

Topics API

过去，人们会使用第三方 Cookie 和其他机制来跟踪用户在各个网站上的浏览行为，从而推断出感兴趣的主题。作为 Privacy Sandbox 计划的一部分，我们将逐步淘汰这些机制。

Topics API 允许浏览器与第三方分享有关用户兴趣的信息，同时保护隐私。

Topics API 可在不跟踪用户所访问的网站的情况下实现针对用户兴趣投放广告 (IBA)。浏览器会根据用户的浏览活动，观察并记录用户可能感兴趣的主题。这些信息会记录在用户的设备上。

例如，API 可能会为访问网站 knitting.example 的用户建议主题 "Fiber & Textile Arts"。

主题是一个信号，可帮助广告技术平台选择相关广告。与第三方 Cookie 不同，在分享此类信息时，系统不会透露有关用户本身或用户浏览活动的更多信息。

阅读 Privacy Sandbox 概览，详细了解主题分类以及如何使用 Topics API

还有更多其他奖励！

当然还有许多其他功能。

  • 主线程上 WebAssembly.Module 的大小上限提高到 8 MB
  • 除了旧版的预组合关键字之外，CSS display 属性现在还接受多个关键字作为值。
  • Compute Pressure API 提供了源试用，该 API 可提供有关设备硬件当前状态的概要信息。

深入阅读

这里仅介绍一些重要的亮点。如需了解 Chrome 115 中的其他变化，请点击以下链接。

订阅

如需随时了解最新动态，请订阅 Chrome Developers YouTube 频道，每当我们发布新视频时，您都会收到电子邮件通知。

嗨，Adriana Jara！Chrome 116 发布后，我会在这里 告诉大家 Chrome 的新功能！