此页面由 Cloud Translation API 翻译。

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. 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;
}

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

/*  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 内容，而无需访问这些资源。

如需替换网页内容，请打开 Network 面板，右键点击相应请求，然后选择 Override content。

请求的下拉菜单中的替换选项。

如果您已设置本地替换项但已停用，则 DevTools 会启用它们。如果您尚未设置这些账号，DevTools 会在顶部的操作栏中提示您。选择要用来存储替换项的文件夹，并允许 DevTools 访问该文件夹。

选择一个文件夹，然后在顶部的操作栏中允许对其进行访问。

替换设置完成后，开发者工具会将您转到 Sources >替换 >编辑器，可让您替换 Web 内容。

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

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

等等！

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

备受期待的 grid-template-columns 和 grid-template-rows 的 subgrid 值现已在 Chrome 中实现。
针对 unload 事件弃用，我们提供 WebSQL 弃用试用和开发者试用。

深入阅读

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

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

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