Chrome 117 的新变化

Adriana Jara

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

• 利用三项新的 CSS 功能，可以轻松添加流畅的进入和退出动画。
• 使用数组分组计算高阶数据集。
• 开发者工具可以简化本地替换项。
• 还有许多更多内容。

我是 Adriana Jara。我们来深入了解下，看看 Chrome 117 会为开发者带来哪些新变化。

用于进入和退出动画的新 CSS 功能。

这三项新的 CSS 功能可完成整个设置，以便轻松添加进入和退出动画，以及从顶层可关闭元素（例如对话框和弹出式窗口）之间平滑地添加动画效果。

第一个功能是 transition-behavior。如需转换离散属性（例如 display），请为 transition-behavior 使用 allow-discrete 值。

.card {
  transition: opacity 0.25s, display 0.25s;
  transition-behavior: allow-discrete; /* Note: be sure to write this after the shorthand */
}

.card.fade-out {
  opacity: 0;
  display: none;
}

然后，使用 @starting-style 规则为从 display: none 到顶层的进入效果添加动画效果。使用 @starting-style 应用一种样式，浏览器可以在相应元素在网页上打开之前查询该样式。

/*  0. BEFORE-OPEN STATE   */
/*  Starting point for the transition */
@starting-style {
  .item {
    opacity: 0;
    height: 0;
  }
}

/*  1. IS-OPEN STATE   */
/*  The state at which the element is open + transition logic */
.item {
  height: 3rem;
  display: grid;
  overflow: hidden;
  transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}

/*  2. EXITING STATE   */
/*  While it is deleting, before DOM removal in JS, apply this
    transformation for height, opacity, and a transform which
    skews the element and moves it to the left before setting
    it to display: none */
.is-deleting {
  opacity: 0;
  height: 0;
  display: none;
  transform: skewX(50deg) translateX(-25vw);
}

最后，如需从顶层淡出 popover 或 dialog，请将 overlay 属性添加到过渡列表中。在转场效果或动画中添加叠加层，为叠加层与其余地图项一起添加动画效果，并确保在添加动画效果时它始终位于顶层。这样看起来会更加流畅。

[open] {
  transition: opacity 1s, display 1s allow-discrete;
}

[open] {
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

如需详细了解如何使用这些功能来改善动画的用户体验，请参阅四个新的 CSS 功能，实现流畅的进入和退出动画。

数组分组

在编程中，数组分组是一种极为常见的操作，在使用 SQL 的 GROUP BY 子句和 MapReduce 编程（可以更好地将其视为 map-group-reduce）时最常出现。

通过将数据组合成组的能力，开发者能够计算更高阶的数据集。例如，同类群组的平均年龄或网页的每日 LCP 值。

数组分组通过添加 Object.groupBy 和 Map.groupBy 静态方法实现这些场景。

groupBy 会针对可迭代对象中的每个元素调用一次提供的回调函数。回调函数应返回一个字符串或符号，指示关联的元素组。

在以下示例中，MDN 文档中有一个商品数组，其中的 groupBy 方法用于返回按类型分组的商品。

const inventory = [
  { name: "asparagus", type: "vegetables", quantity: 5 },
  { name: "bananas", type: "fruit", quantity: 0 },
  { name: "goat", type: "meat", quantity: 23 },
  { name: "cherries", type: "fruit", quantity: 5 },
  { name: "fish", type: "meat", quantity: 22 },
];

const result = Object.groupBy(inventory, ({ type }) => type);

/* Result is:
{
  vegetables: [
    { name: 'asparagus', type: 'vegetables', quantity: 5 },
  ],
  fruit: [
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "cherries", type: "fruit", quantity: 5 }
  ],
  meat: [
    { name: "goat", type: "meat", quantity: 23 },
    { name: "fish", type: "meat", quantity: 22 }
  ]
}
*/

如需了解详情，请参阅 groupBy 文档。

在开发者工具中简化本地替换。

我们已简化了本地替换功能，因此您无需访问网络面板即可轻松模拟远程资源的响应标头和 Web 内容。

如需覆盖 Web 内容，请打开网络面板，右键点击相应请求，然后选择覆盖内容。

如果您已设置本地替换项但已停用，则开发者工具会启用这些替换项。如果您尚未设置，开发者工具会在顶部的操作栏中提示您。选择一个存储替换项的文件夹，并允许开发者工具访问该文件夹。

设置替换项后，开发者工具会随即将您转到来源 > 替换项 > 编辑器，以便您可以替换 Web 内容。

请注意，被覆盖的资源在 Network 面板中用 指示。将鼠标悬停在该图标上即可查看被替换的内容。

如需详细了解 Chrome 117 中的开发者工具，请查看开发者工具的新变化。

还有更多其他奖励！

当然还有许多其他功能。

• 备受期待的 grid-template-columns 和 grid-template-rows 的 subgrid 值现已在 Chrome 中实现。

• 我们会针对 unload 事件弃用提供 WebSQL 弃用试用和开发者试用。

• 适用于 bfcache 的 notRestoredReasons API（适用于 Chrome 116 的视频中提到）应该会在此版本中推出。

深入阅读

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

• Chrome 开发者工具的新变化 (117)
• Chrome 117 弃用和移除
• 针对 Chrome 117 的 ChromeStatus.com 更新
• Chromium 源代码库更改列表
• Chrome 发布日历

订阅

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

嗨，Adriana Jara！Chrome 117 发布后，我会在这里告诉大家 Chrome 的新变化！