此页面由 Cloud Translation API 翻译。

Chrome 115 的新变化

Adriana Jara

以下是您需要知晓的相关信息：

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

我是 Adriana Jara。下面，我们来详细了解一下 Chrome 115 中面向开发者的新功能。

滚动驱动的动画

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

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

文档顶部的阅读指示器，由滚动驱动。

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

此页面上的图片会在出现时淡入。

默认情况下，附加到元素的动画会在文档时间轴上运行。其原始时间从网页加载时开始的 0 开始，并随着时间的推移而向前跳动。这是默认的动画时间轴，并且到目前为止，这是您有权访问的唯一动画时间轴。

滚动驱动型动画规范定义了两种可供您使用的新时间轴：

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

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

<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 或其他跟踪机制的情况下满足跨网站使用场景。例如：

Protected Audience API：可以注重隐私保护的方式投放基于兴趣的广告。
共享存储空间：允许在安全环境中访问未分区的跨网站数据。

为了保护隐私，其中一些 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 中学习第一方数据。

存储分区前后状态的对比。

请参阅以下文章，查看有关 Fenced Frames、Protected Audience API、Shared Storage 等的相关文档

Topics API

过去，第三方 Cookie 和其他机制曾用于跟踪用户在各个网站上的浏览行为，以推断用户的兴趣主题。作为 Privacy Sandbox 计划的一部分，这些机制正在逐步淘汰。

借助 Topics API，浏览器可以在保护隐私的同时与第三方分享用户兴趣相关的信息。

Topics API 可实现针对用户兴趣投放广告 (IBA)，而无需跟踪用户访问的网站。浏览器会根据用户的浏览活动，观察和记录用户似乎感兴趣的主题。此信息记录在用户的设备上。

例如，如果用户访问了网站 knitting.example，该 API 可能会建议用户关注主题 "Fiber & Textile Arts"。

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

如需详细了解主题分类和如何使用 Topics API，请参阅 Privacy Sandbox 概览

等等！

当然，还有许多其他功能。

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

深入阅读

本文仅介绍了一些主要亮点。如需了解 Chrome 115 中的其他变更，请点击以下链接。

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

我是 Adriana Jara，Chrome 116 发布后，我会立即为您介绍 Chrome 中的新变化！