Chrome 90 的新功能

Pete LePage

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

• CSS overflow 属性有一个新值。
• Feature Policy API 已重命名为权限政策。
• 此外，还有一种全新方式可以直接在 HTML 中实现和使用 Shadow DOM。
• 我在 90 年代有几件几乎完全一样的夹克。
• 还有更多功能。

我是 Pete LePage，我收到了面向 Chrome 90 开发者的 411，沿用 1990 年的风格！

使用 overflow: clip 防止溢出

CSS 简直无敌了！不过，我认为每位 Web 开发者都曾在某个时候看到过或经历过内容溢出的情况。CSS Tricks 上有一篇很棒的文章，介绍了处理溢出情况的不同方式，例如使用 overflow: hidden 或 auto。

在 CSS Overflow 规范中，有一个新的 clip 属性，其运作方式与 hidden 类似。

.overflow-clip {
  overflow: clip;
}

使用 overflow: clip，您可以阻止对该框进行任何类型的滚动，包括程序化滚动。这意味着该框不会被视为滚动容器；它不会启动新的格式设置上下文。如果需要，您可以通过 overflow-x 和 overflow-y 对单个轴应用剪裁。

请注意，您还可以使用 overflow-clip-margin 展开裁剪边框。当存在应该可见的墨水溢出时，这会非常有用。

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}

如需查看 overflow: clip 的实际运作方式，请访问 https://petele-css-is-awesome.glitch.me/

“功能政策”现已更名为“权限政策”

早在 Chrome 74 中，我们就引入了 Feature Policy API，可让您选择性地启用、停用和修改浏览器中特定 API 和 Web 功能的行为。这些政策是您与浏览器之间的合同。它们会告知浏览器您的 intent 是什么。

如果您的代码或您使用的任何第三方库违反了您预先选择的规则，浏览器会使用更好的用户体验替换该行为，或者只是说“说话不算数”，完全屏蔽该 API。

从 Chrome 90 开始，Feature Policy API 将更名为权限政策，HTTP 标头也随之重命名。同时，社区已敲定一种基于 HTTP 的结构化字段值的新语法。

Permissions-Policy: geolocation=()

Feature-Policy: geolocation 'none'

如果您有兴趣了解如何在自己的网站上使用此功能，请参阅功能政策简介。

声明式 Shadow DOM

Shadow DOM 是 Web Components 标准的一部分，可让您将 CSS 样式限定为特定 DOM 子树，并将该子树与文档的其余部分隔离。在此之前，使用 Shadow DOM 的唯一方法是使用 JavaScript 构建影子根。

const host = document.getElementById('host');
const opts = {mode: 'open'};
const shadowRoot = host.attachShadow(opts);
const html = '<h1>Hello Shadow DOM</h1>';
shadowRoot.innerHTML = html;

这对于客户端渲染非常适用，但在服务器端渲染中效果不太好，因为服务器生成的 HTML 中没有内置的方法来表达阴影根。不过，从 Chrome 90 开始，您可以使用声明式 Shadow DOM 了。您只需使用 HTML 即可创建阴影根。

声明式影子根是具有 shadowroot 属性的 <template> 元素。它会被 HTML 解析器检测，并立即作为其父元素的影子根应用。

<host-element>
  <template shadowroot="open">
    <slot></slot>
  </template>
  <h2>Light content</h2>
</host-element>

加载纯 HTML 标记会生成以下 DOM 树：

<host-element>
  #shadow-root (open)
  <slot>
    ↳
    <h2>Light content</h2>
  </slot>
</host-element>

这样，我们就可以在静态 HTML 中获得 Shadow DOM 封装和插槽投影的好处。无需 JavaScript 即可生成整个树，包括阴影根。

如需了解更多详情，请查看 web.dev 上的声明式 Shadow DOM。

等等

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

为了帮助更好地保护隐私，甚至为访问支持 HTTPS 的网站的用户提高加载速度，Chrome 的地址栏将默认使用 https://。如果您尚未设置从 HTTP 到 HTTPS 的自动重定向，不妨趁此机会完成设置。

Chrome 桌面版中还提供 AV1 编码器，该编码器专为与 WebRTC 集成的视频会议进行了优化。

深入阅读

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

• Chrome 开发者工具 (90) 中的新变化
• Chrome 90 弃用和移除的功能
• ChromeStatus.com 上有关 Chrome 90 的更新
• Chrome 90 中的 JavaScript 新变化
• Chromium 源代码库更改列表

订阅

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

我是 Pete LePage，Chrome 91 发布后，我会立即为您介绍 Chrome 中的新变化！

特别致谢

拍摄这期以 90 年代为主题的《Chrome 新变化》节目非常有趣。非常感谢 Sean Meehan 的创意，以及为 1990 年开启时间转换的杰出人士聚集在一起。

当然，还有 Loren Borja、Lee Carruthers 和 Lukas Holcek，他们制作了我所有的“Chrome 新变化”视频，让我看起来比实际水平要高得多。谢谢！