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
迭代器辅助功能
迭代器助手是迭代器原型上的新方法,让我们更方便地使用和处理迭代器里的内容。方法比较多,想更详细的学习,看这里:https://github.com/tc39/proposal-iterator-helpers
使 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 中,您可以关注以下新的试验。
WebSQL 废弃试验
WebSQL 正在从 Chrome 中移除。鼓励依赖它的网站通过 Wasm 迁移到 SQLite。
此停用试验允许需要更多时间进行迁移的开发人员在 Chrome 123(2024 年 3 月)之前继续使用 WebSQL。
使用共享 Brotli 进行压缩字典传输
此功能增加了对使用指定的先前响应作为 Brotli 压缩 HTTP 响应的外部字典的支持。
在这里注册试验:https://developer.chrome.com/origintrials/#/register_trial/2583940286203822081
分标签的 Web 应用程序
允许 Web 应用窗口拥有选项卡条,例如,可以在同一个应用中编辑多个文档。这将添加一个新的显示模式 tabbed 和一个新的清单字段,允许对选项卡条进行自定义设置。
注册试验地址:https://developer.chrome.com/origintrials/#/register_trial/3547710606461108225
弃用和移除内容
这个版本的 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版本给我们带来的