Chrome 117 的新变化

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

我是 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);
}

最后,如需从顶层淡出 popoverdialog,请将 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.groupByMap.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 文档

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

本地替换功能现已简化,因此您可以从 Network 面板轻松模拟远程资源的响应标头和 Web 内容,而无需访问它们。

若要覆盖 Web 内容,请打开网络面板,右键点击相应请求,然后选择覆盖内容

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

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

在顶部的操作栏中选择一个文件夹并授予其访问权限。

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

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

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

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

等等!

当然,还有更多其他功能。

深入阅读

本指南仅涵盖部分重要内容。请访问以下链接 Chrome 117 中的其他变更。

订阅

要随时掌握最新动态,请订阅 Chrome 开发者 YouTube 频道, ,每当我们发布新视频时,您都会收到电子邮件通知。

亲爱的 Adriana Jara,Chrome 117 一发布,我都会在这里向大家介绍 Chrome 的新变化!