Chrome 117 的新变化

Adriana Jara

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

我是 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 内容。

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

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

如果您已设置本地替换，但处于停用状态，开发者工具会启用这些替换。如果您尚未设置这些功能，开发者工具会在顶部的操作栏中提示您。选择要用来存储替换内容的文件夹，并允许开发者工具访问该文件夹。

选择一个文件夹，然后在顶部操作栏中授予访问权限。

设置替换项后，开发者工具会带您前往来源 > 替换项 > 编辑器，以便您替换网页内容。

请注意，被替换的资源在网络面板中会以 已保存。 表示。将鼠标悬停在该图标上，查看哪些内容被替换。

“网络”面板中请求旁边的替换图标。

如需了解所有详情以及 Chrome 117 中开发者工具的更多信息，请参阅开发者工具的新变化。

以及更多！

当然，还有更多精彩内容。

深入阅读

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

订阅

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

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