Chrome 117 Beta又上新功能(css、api等)

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

css

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

@starting-style 规则

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

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

javascript 复制代码
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-columnsgrid-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

  1. 数组分组

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

看一下代码示例:

javascript 复制代码
 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() 方法返回给定自定义元素定义的标签名。

javascript 复制代码
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 位数字限制的值将不再有效。例如,在更改后,以下脚本的行为将有所不同:

javascript 复制代码
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 异常。

javascript 复制代码
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 响应的外部字典的支持。

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

分标签的 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版本给我们带来的

相关推荐
耶啵奶膘1 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^3 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic4 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿4 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具4 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161775 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test6 小时前
js下载excel示例demo
前端·javascript·excel
Yaml46 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事6 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro