一文全面解读 Chrome 117 Beta 新特性来啦～

谷歌Chrome 117 Beta 版本新增了 CSS 网格子网格（subgrid）、入场和出场动画支持，以及 CSS、数组分组、迭代器辅助功能等功能。

欢迎关注公众号《前端界》，文章会同步更新，也可快速加入前端交流群！

接下来我们就带大家详细的认识一下这些新特性~

主要分以下几个方向来展开说：

CSS

这个版本新增了六个新的 CSS 特性。其中前三个属性是为了实现对离散属性的过渡效果，从而实现入场和出场动画。

@starting-style 规则

这个规则允许在第一个样式更新时启动 CSS 过渡效果。

在元素的第一个样式更新时，或者当显示类型从 none 更改为其他类型时，CSS 过渡效果不会从初始样式触发过渡效果。这是为了避免意外的初始样式过渡效果。要在第一个样式更新时启动过渡效果，现在可以在 @starting-style 规则内部应用样式。例如，以下 CSS 在 div 的第一个样式更新时从绿色过渡到酸橙色的背景颜色：

div { 
  transition: background-color 0.5s; 
  background-color: lime; 
} 

@starting-style {
  div { 
    background-color: green; 
  } 
}

对比一下不同版本浏览器运行效果：

chrome 117 bate 版本中， 在第一个样式更新时启用了 CSS 过渡效果， 但之前的老版本浏览器中并不会有过渡效果。

overlay 属性

overlay 属性使开发人员能够在退出过渡时将元素保持在顶层。overlay 属性用于指示元素是否位于顶层，它可以取两个值：none 或 auto。

CSS transition-behavior 属性

transition-behavior CSS 属性是 transition 属性的长属性，它允许在过渡中使用离散属性。通过为 transition-behavior 指定 allow-discrete 值，离散属性现在将在 50% 处开始动画，并从其初始值翻转到其最终值。对于其中初始值或最终值之一为 display: none 和 content-visibility: hidden 的过渡，visible 值将在整个过渡的持续时间内使用。

CSS grid 子网格（subgrid）值

在 Chrome 中现在已经实现了 subgrid ，用于 grid-template-columns 和 grid-template-rows。这个值允许嵌套的网格使用其父级定义的轨道，而不是为行、列或两者都创建新的轨道定义。

CSS text-wrap: pretty

CSS 的 text-wrap 属性的 pretty 值，优化了最佳布局，而不是速度。它适用于正文文本，并且期望有多行文本。通过使用 pretty，开发人员明确选择了一种可能比 wrap（优化性能）慢的布局方法。Chrome 117 中的当前实现优化了单行，以防止单个单词显示在文本段落的底部。

在 Chrome 117 中，我们来尝试使用一下 text-wrap: pretty ，看看这个值如何改变文本的呈现方式。

这里举一个例子：

contain-intrinsic-size: auto none 支持

这个功能扩展了现有的 contain-intrinsic-size 语法，增加了 auto 和 none。

Web APIs

数组分组

数组分组是一种非常常见的操作，最好的例子是 SQL 的 GROUP BY 子句和 MapReduce 编程（更好地理解为 map-group-reduce）。将数据组合成分组的能力使开发人员能够计算更高级的数据集，比如一个群体的平均年龄或网页每日 LCP 值。通过添加 Object.groupBy 和 Map.groupBy 静态方法，该功能实现了这一点。Object 方法返回一个普通对象，其中分组是属性键。Map 方法返回一个 Map，其中键可以是任意值。

看一下代码示例：

 const goods = [
      { name: "红心西柚", type: "fruit", price: 5 },
      { name: "香蕉", type: "fruit", price: 5.6 },
      { name: "丝瓜", type: "vegetable", price: 2.3 },
      { name: "土豆", type: "vegetable", price: 1.5 },
      { name: "草鱼", type: "fresh", price: 9.2 },
      { name: "苹果", type: "fruit", price: 9.2 },
      { name: "黄花鱼", type: "fresh", price: 9.2 },
    ];
    const result = Object.groupBy(goods, ({ type }) => type);
    console.log("result:", result);

结果打印：

通过 Clear-Site-Data 头部清除客户端提示

网站现在可以使用 Clear-Site-Data: "clientHints" 来清除客户端提示缓存。当你用同样的方法去清除一些特定的东西，比如 "cookies"（网站储存在你电脑上的小东西）或者 "cache"（存储在你浏览器里的数据），客户端提示也会被清除。这是因为，如果你在浏览器的设置里删除了 cookies，客户端提示也会跟着一起被清除，就好像客户端提示也是一种类似于存储在你电脑上的东西。为了保持一致，也会同时删除客户端提示。

Clear-Site-Data 头部的通配符语法

现在，网站可以通过发送 Clear-Site-Data: "*" 来清除所有存储目标（"cookies"、"cache" 和 "storage"）。请注意，Chrome 目前不支持清除 "executionContexts"，但如果将来添加了这个功能，任何针对 "*" 的头部都将同时清除它们。

customElements.getName

customElements.getName() 方法返回给定自定义元素定义的标签名。

class MyElement extends HTMLElement {
      constructor() {
        super();
      }
      // MyElement 属性、方法
    }
    customElements.define("my-element", MyElement);

console.log("getName:", customElements.getName(MyElement));
    // 打印结果: getName: my-element

迭代器辅助功能

迭代器助手是迭代器原型上的新方法，让我们更方便地使用和处理迭代器里的内容。方法比较多，想更详细的学习，看这里：github.com/tc39/propos…

使 CaptureController 从 EventTarget 接口派生

CaptureController 接口允许进一步操作屏幕捕获会话。将来，预计与捕获会话相关的事件将在该控制器上分派。为了能够管理这些事件的监听器，CaptureController 上的 EventTarget 方法也可用。

PerformanceResourceTiming deliveryType

PerformanceResourceTiming 的 deliveryType 属性返回有关资源是如何传递的信息。例如，从缓存传递的资源（当前通过 transferSize 暴露）以及被上一页预取的导航。

URL 设置器中的端口溢出检查

在设置 url.port 时，将会检查端口值。所有超过 16 位数字限制的值将不再有效。例如，在更改后，以下脚本的行为将有所不同：

  let u = new URL("http://test.com:9001");
    console.log("更改前：", u.port);

    u.port = 90;
    console.log("90更改后：", u.port);
    u.port = 65536;
    console.log("65536更改后：", u.port);

打印结果: 可以看到超出范围的值，修改不成功！

私有状态令牌 API

这是一个新的 API，用于在站点之间传播有限的私有信号，而无需使用像第三方 Cookie 这样的跨站点持久标识符。依赖于第三方 Cookie 的反欺诈方法在第三方 Cookie 被弃用后将不再有效。Private State Token API 不会生成或定义反欺诈信号：这由相应的第一方和令牌发行者负责。相反，该 API 通过对传输的信号中的信息施加限制来维护隐私。该 API 基于 Privacy Pass 协议的一种变体，正在 IETF 标准化过程中。它可以被视为 Privacy Pass 协议的 Web 公开形式。API 规范将会针对新版本和类型的令牌进行更新，并与 Privacy Pass 工作组规范保持同步。预期的更改将在底层的加密协议和令牌发行代码中进行：我们不希望在开发人员面向的发行和赎回 Fetch API 中进行更改。Private State Token API 以前称为 Trust Token API。它更名以更准确地捕捉底层的语义，并突出用户的隐私优势。

URL 标准兼容的 IPv4 嵌入 IPv6 主机解析器

将更新解析 IPv4 嵌入式 IPv6 主机的行为，以严格遵循 Web URL 标准。对 IPv6 地址的引入的限制如下：

• 嵌入的 IPv4 地址始终必须由 4 个部分组成。
• 地址少于 4 个部分的情况，如 ·http://[::1.2]· 将不再有效。这个功能是 URL 互操作性 2023 的一部分。

URL：允许 "%00" 作为有效的 URL 路径

目前，Chrome 认为如果 URL 的路径部分包含 "%00"（或 null），则该 URL 无效，这与 URL 标准不符。例如，以下测试在 Chrome 中失败，因为新的 URL(...) 抛出了 Invalid URL 异常。

assertEquals(new URL("http://example.com/%00").pathname, "/%00"); 

根据 URL 标准，URL 路径中的任何字符或字节序列都不应该使 URL 无效，这个更改将使 Chrome 遵循该标准。

WebRTC RTP 标头扩展控制

扩展 WebRTC RTCRtpTransceiver API，以便在协商时提供对哪些 RTP 标头扩展进行控制。

VideoEncoder 中的每帧量化器

新增了 "quantizer" VideoEncoderBitrateMode，用于 VideoEncoder。这提供了为 AV1、VP9 和 AVC 视频编解码器的每一帧指定量化器参数的能力。

正在进行的试验

在 Chrome 117 中，您可以关注以下新的试验。

使用共享 Brotli 进行压缩字典传输

此功能增加了对使用指定的先前响应作为 Brotli 压缩 HTTP 响应的外部字典的支持。

在这里注册试验：developer.chrome.com/origintrial…

WebSQL 废弃试验

WebSQL 正在从 Chrome 中移除。鼓励依赖它的网站通过 Wasm 迁移到 SQLite。

此停用试验允许需要更多时间进行迁移的开发人员在 Chrome 123（2024 年 3 月）之前继续使用 WebSQL。

分标签的 Web 应用程序

允许 Web 应用窗口拥有选项卡条，例如，可以在同一个应用中编辑多个文档。这将添加一个新的显示模式 tabbed 和一个新的清单字段，允许对选项卡条进行自定义设置。

注册试验地址：developer.chrome.com/origintrial…

弃用和移除内容

这个版本的 Chrome 引入了下面列出的弃用和移除。有两个功能的弃用，以及移除四个功能：

弃用 unload 事件

Chrome 117 将开始弃用 unload 事件处理程序。如果您的网站使用了这些功能，则强烈建议阅读关于弃用 unload 的专门文章，以获取更多详细信息。

弃用 TLS SHA-1 服务器签名

Chrome 正在移除在 TLS 握手期间使用 SHA-1 签名算法的服务器签名支持。这不会影响服务器证书中的 SHA-1 支持，因为已经被移除，或者客户端证书中的支持，因为仍然支持。

[WebRTC] 移除基于回调的旧 getStats()

RTCPeerConnection 有两个版本的 getStats() 方法，一个是符合规范的，通过解析 Promise 返回报告，另一个是非标准的，通过回调作为第一个参数返回非常不同的报告。基于回调的版本现在已被移除。

移除 WebRTC getStats 数据通道标识符的 -1 值

WebRTC 的 getStats API 暴露了一个 dataChannelIdentifier 属性。在查询数据通道连接建立之前的统计信息时，它将不再提供值 "-1"。而是会省略该字典成员。

移除 WebRTC getStats 编码器实现和解码器实现的 "unknown" 值

WebRTC 的 getStats API 暴露了编码器和解码器实现的名称，用于出站和入站视频。在查询统计信息时，如果在视频帧被编码或解码之前，它将不再提供值“unknown”。而是会省略该字典成员。

CSS 属性 -webkit-highlight

移除 CSS 属性 -webkit-highlight，该属性旨在高亮文本，但从未标准化。在 Chromium 中没有可见效果（虽然它会被解析，但在渲染内容中从未被使用）。该属性在 2014 年被从 WebKit 中移除，在 MDN 上已被标记为弃用，并最近被 CSS Highlight 伪类规范取代。

以上就是这次Chrome 117 Beta版带来的一些新特性了,你们有什么看法呢?留言区一起讨论吧!

欢迎关注公众号《前端界》，文章会同步更新，也可快速加入前端交流群！

参考文章

Chrome 117 beta: developer.chrome.com/blog/chrome…