Chrome 114 的新变化

Adriana Jara

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

  • CSS text-wrap: balance 可用于改进文本布局。
  • 此处显示的是按顶级网站 (CHIPS) 划分的 Cookie。
  • 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 不会收到在网站 A 中嵌入网站 C 时设置的 Cookie。

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

Popover API。

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

其中包括操作菜单、表单元素建议、内容选择器和教学界面等用户互动元素。

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

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

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

等等！

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

深入阅读

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

订阅

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

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