Chrome 114 的新变化

Adriana Jara

以下是您需要知晓的相关信息：

  • CSS text-wrap: balance 可用于改进文本布局。
  • 按顶级网站分区的 Cookie (CHIPS) 就在这里。
  • 借助 Popover API，您可以比以往更轻松地使用弹出式窗口。
  • 还有许多其他功能。

我是 Adriana Jara。我们来深入了解一下 Chrome 114 中面向开发者的新功能。

text-wrap:balance。

使用 text-wrap: balance 改进文本布局。下方动画展示了添加这行代码所带来的变化。

试用演示版

作为开发者，您不知道文本的最终大小、字体大小甚至语言。所有变量都需要有效处理文本换行。由于浏览器确实知道所有因素，因此您可以使用 text-wrap:balance 请求浏览器找出最佳的平衡行换行解决方案。

上文中的两个示例会一起显示，其中一个被标记为不平衡，另一个被标记为平衡。

平衡的文本块更能吸引读者的目光。这样可以更好地吸引注意力，并且整体上更易于阅读。

平衡标题将是 text-wrap: balance 的主要用例，也应该是主要用例。调整文本平衡会导致性能开销，因此为了降低开销，此功能最多只能用于四行文本。

如需查看示例和更多详细信息，请参阅这篇文章，以改进文本布局。

CHIPS：具有独立分区状态的 Cookie。

CHIPS（具有独立分区状态的 Cookie）：使用新的 Cookie 属性 Partitioned 选择启用按顶级网站分区的第三方 Cookie。

在 CHIPS 之前，当用户访问网站 A 时，嵌入的网站 C 可以在用户的机器上设置 Cookie。如果用户随后访问了也嵌入了网站 C 的网站 B，网站 C 便可访问在网站 A 上设置的同一 Cookie。这样，网站 C 就可以汇总用户在网站 A、B 以及嵌入了该代码的每个网站上的浏览活动。

显示包含未分区的 Cookie 的网站和存储空间的示意图。

虽然跨网站跟踪是一个问题，但有些有效的跨网站 Cookie 需求可以通过 Cookie 分区以保护隐私的方式实现。

使用 CHIPS 时，如果用户访问网站 A，并且来自网站 C 的嵌入内容使用 Partitioned 属性设置了 Cookie，则该 Cookie 仅会保存在分区 jar 中，适用于网站 C 在网站 A 上嵌入时设置的 Cookie。只有在顶级网站为 A 时，浏览器才会发送该 Cookie。

显示网站和分区存储空间以及 Cookie 的示意图。

当用户访问新网站（例如网站 B）时，网站 C 不会收到在网站 C 嵌入到网站 A 时设置的 Cookie。

如需详细了解逐步淘汰第三方 Cookie 的流程，请参阅这篇文章。

Popover API。

借助 Popover API，您可以更轻松地构建在所有其他 Web 应用界面之上显示的暂时性界面 (UI) 元素。

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

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

这与 <dialog> 元素类似，但存在一些重要差异，包括轻量关闭行为、弹出式窗口互动管理和事件支持，以及缺少“模态”模式。

如需了解详情，请参阅这篇文章。

等等！

当然，还有许多其他功能。

  • 借助开发者工具，您可以在 WebAssembly 应用中暂停和调试 C 和 C++ 代码（支持 DWARF）。
  • 借助 navigator.bluetooth.requestDevice() 中的 exclusionFilters 选项，Web 开发者可以从浏览器选择器中排除某些设备。
  • 背景虚化功能正在进行源试用。

深入阅读

本文仅介绍了一些主要亮点。如需了解 Chrome 114 中的其他变更，请参阅以下链接。

订阅

如需及时了解最新动态，请订阅 Chrome 开发者 YouTube 频道，这样每当我们发布新视频时，您就会收到电子邮件通知。

我是 Adriana Jara，Chrome 115 发布后，我会立即为您介绍 Chrome 中的新变化！