4 月新增 Web 平台

探索 2024 年 4 月在稳定版和 Beta 版网络浏览器中推出的一些有趣的功能。

2024 年 4 月,Firefox 125Chrome 124 成为稳定版。这篇博文介绍了 Web 平台中新增的功能。

Firefox 125 在 Baseline 新发布的功能中添加了四项新功能。 Popover API:Intl.Segmenteralign-content(用于块布局)以及 content-boxstroke-box 值(用于 transform-box)。

Popover API

借助 Popover API,您可以创建多种非模态弹出式窗口。其中包括提示、菜单、自定义消息框弹出式窗口等。 弹出式窗口包含许多内置功能,而您之前需要为这些功能编写 JavaScript。如需了解详情,请参阅 Popover API 登陆基准版本

浏览器支持

  • 114
  • 114
  • 125
  • 17

来源

Intl.Segmenter

Intl.Segmenter 支持本地敏感文本分割。例如,在不用空格分隔单词的语言中,你可以拆分单词。如需了解其工作原理,请参阅 Intl.Segmenter 对象现已纳入 Baseline

浏览器支持

  • 87
  • 87
  • 125
  • 14.1

来源

align-content 用于块布局

现在,所有主流引擎都支持 align-content 属性进行块布局。这意味着,您可以进行块方向对齐,而无需在父级上创建弹性布局或网格布局。如需查看示例,请参阅块布局的 align-content 属性现已纳入基准范围

浏览器支持

  • 123
  • 123
  • 125
  • 17.4

CSS transform-box

最后,在 Firefox 125 中,是 transform-box 属性的 content-boxstroke-box 值。content-box 值会使用内容框,而 stroke-box 会使用包含 SVG 形状的描边边界框。

浏览器支持

  • 118
  • 118
  • 125
  • 13.1

WebSocketStream API

WebSocketStream API 集成了 WHATWG 数据流与 WebSocket API,可在 Chrome 124 中使用。如需了解详情,请参阅 WebSocketStream:将流与 WebSocket API 集成

浏览器支持

  • 124
  • 124
  • x
  • x

setHTMLUnsafeparseHTMLUnsafe

Chrome 124 还包含 setHTMLUnsafeparseHTMLUnsafe 方法,以便您从 JavaScript 使用声明性阴影 DOM。与 innerHTMLDOMParser 相比,这些方法还提供更简单的方法,以命令方式将 HTML 解析为 DOM。

浏览器支持

  • 124
  • 124
  • 123
  • 17.4

Beta 版浏览器版本

Beta 版浏览器可让您预览下一个稳定版本浏览器中将推出的功能。不妨借此机会测试那些可能会在全球发布之前对您的网站造成影响的新功能或移除。新的 Beta 版包括 Firefox 126Safari 17.5Chrome 125。 这些版本为平台带来了许多很棒的功能。如需了解所有详细信息,请查看版本说明。这里仅介绍其中的一些亮点。

Safari 17.5 包含 light-dark() 颜色函数,在 17.5 稳定后,该函数将成为新推出的基准功能。

新推出的基准中还新增了 CSS 阶梯值函数。Chrome 125 包含 round()mod()rem()

Chrome 125 还包含 Compute Pressure API 和 CSS 锚点定位功能。

Firefox 126 包含 Screen Wake Lock API,这让又新增了一项 Baseline 功能。