Chrome 90 的新功能

Pete LePage

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

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

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

使用 overflow: clip 防止溢出

CSS IS AWESOME

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

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

.overflow-clip {
  overflow: clip;
}
带有文本 CSS 的方形框非常棒，其中的“awesome”会溢出

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

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

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}
带有文本 CSS 的方形框很棒，它能开箱即用

如需查看 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 的结构化字段值的新语法。

Chrome 90 及更高版本

Permissions-Policy: geolocation=()

Chrome 89 及更低版本

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 Developers YouTube 频道，这样每当我们发布新视频时，您就会收到电子邮件通知。

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

特别致谢

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

GDS Design

  • 福拉·阿基诺拉
  • Derek Bass
  • Christopher Bodel
  • 尼克·克鲁西克
  • 克里斯·沃克

音效设计和额外音乐

  • 布赖恩·戈登 (Bryan Gordon)

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