5 月新增 Web 平台

了解 2023 年 5 月在稳定版和 Beta 版网络浏览器中推出的一些有趣功能。

2023 年 5 月,Firefox 113Chrome 113Chrome 114Safari 16.5 已稳定发布。我们来看看这对 Web 平台意味着什么。

Chrome 113 包含 WebGPU,它是 WebGL 和 WebGL 2 图形 API 的后继者。它提供 GPU 计算、更低的 GPU 硬件访问开销、从单个图形设备渲染到多个画布等现代功能,以及更出色、更可预测的性能。

浏览器支持

  • Chrome:113.
  • Edge:113.
  • Firefox Technology Preview:受支持。
  • Safari 技术预览版:受支持。

来源

First-Party Set

第一方集 (FPS)Privacy Sandbox 的一部分。组织可以通过此方法声明网站之间的关系,以便浏览器决定何时允许一组网站获得有限的第三方 Cookie 访问权限。FPS 已在 Chrome 113 中开始分阶段发布。

CSS 媒体功能等

对于 CSS,Chrome 113 包含 overflow-inlineoverflow-block 媒体功能。

浏览器支持

  • Chrome:113.
  • Edge:113.
  • Firefox:66.
  • Safari:17.

来源

以及 update 媒体功能。

浏览器支持

  • Chrome:113.
  • Edge:113.
  • Firefox:102.
  • Safari:17.

来源

此外,还添加了 linear() 缓动函数,您可以参阅使用 linear() 缓动函数在 CSS 中创建复杂的动画曲线一文,详细了解该函数。

浏览器支持

  • Chrome:113.
  • Edge:113.
  • Firefox:112.
  • Safari:17.2。

CSS 颜色级别 4 功能

Firefox 113 包含 color()lab()lch()oklab()oklch()color-mix() 函数表示法,以及 forced-color-adjust 属性。这意味着,现在所有三个主要引擎都支持新的颜色空间和函数。如需详细了解这些色彩空间和函数,请参阅高清 CSS 颜色指南

浏览器支持

  • Chrome:111.
  • Edge:111.
  • Firefox:113.
  • Safari:16.2。

来源

更好地控制 :nth-child() 选择

Firefox 113 还添加了将选择器列表传递到 :nth-child()nth-last-child() 的功能。如需详细了解此方法,并查看示例,请参阅使用 S 语法更好地控制 :nth-child() 选择一文。

浏览器支持

  • Chrome:111.
  • Edge:111.
  • Firefox:113.
  • Safari:9.

Compressions Streams API

由于已纳入 Firefox 113,Compressions Streams API 现在在所有三个主要引擎中都受支持,可用于压缩和解压缩数据流。这意味着,JavaScript 应用无需再捆绑压缩库。

浏览器支持

  • Chrome:80。
  • Edge:80.
  • Firefox:113.
  • Safari:16.4。

来源

CSS 嵌套

Safari 16.5 解决了大多数问题,但也添加了对 CSS 嵌套的支持,并提供了新的嵌套选择器 >,用于嵌套相关样式规则,使用方式对使用过预处理器的开发者来说会很熟悉:

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

浏览器支持

  • Chrome:120.
  • Edge:120。
  • Firefox:117.
  • Safari:17.2。

来源

使用 text-wrap: balance 平衡标题

从 Chrome 114 开始,您可以使用 text-wrap: balance。这样,您就可以平衡标题,避免最后一行只有一个字,从而获得更美观、更易读的结果。如需了解详情,请参阅 CSS text-wrap: balance

浏览器支持

  • Chrome:114.
  • Edge:114。
  • Firefox:121.
  • Safari:17.4。

来源

CHIPS:具有独立分区状态的 Cookie

作为逐步淘汰第三方 Cookie 工作的一部分,CHIPS 支持使用新的 Cookie 属性 Partitioned 选择启用按顶级网站划分的第三方 Cookie。CHIPS 在 Chrome 114 中提供。

Popover API

Chrome 114 中还提供了 Popover API,可让您更轻松地构建在所有其他 Web 应用界面之上显示的暂时性界面 (UI) 元素。

这些元素包括可与用户互动的元素,例如操作菜单、表单元素建议、内容选择器和教学界面。

借助新的 popover 属性,您可以自动在顶层中显示任何元素。这意味着,开发者无需再担心定位、堆叠元素、焦点或键盘互动。

如需了解详情,请参阅介绍 popover API

浏览器支持

  • Chrome:114.
  • Edge:114。
  • Firefox:120.
  • Safari:17.

来源

Beta 版浏览器

通过浏览器 Beta 版,您可以抢先体验即将推出的浏览器稳定版中提供的功能。在全球用户获得该版本之前,您可以先测试可能会影响您网站的新功能或移除的功能。新版 Beta 版为 Firefox 114Chrome 115Safari 16.6。这些版本为该平台带来了许多出色的功能。如需了解所有详情,请参阅版本说明,下面列出了其中的几个亮点。

Chrome 115 为 CSS display 属性提供了多个值。这意味着 display: flex 会变为 display: block flexdisplay: block 会变为 display: block flow。单个值会作为旧版关键字进行维护,一旦在 Chrome 稳定版中发布,系统就会在所有引擎中提供多个值。

Chrome 115 中还包含 Web 动画规范的 ScrollTimelineViewTimeline 扩展。这些属性可通过 CSS 和 JavaScript 实现滚动条驱动的动画

Firefox 114 包含 WebTransport API,这是对 WebSockets 的现代更新,支持多串流、单向串流和无序传送。

“新手入门 Web 系列”的一部分