Chrome 90 的新功能

Pete LePage

以下是您有必要知道的信息：

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

我叫 Pete LePage，我为 Chrome 90 的开发者介绍了 411，体验 1990 风格的体验！

使用 overflow: clip 防止溢出

CSS 太棒了

CSS 就是这些，而且是一大堆筹码！但我认为每位 Web 开发者都见过和遇到过一些让自己感到尴尬的情况。CSS 技巧中有一篇很棒的博文，介绍了处理溢出的不同方式，例如使用 overflow: hidden 或 auto。

CSS 溢出规范中新增了一个 clip 属性，其运作方式与 hidden 类似。

.overflow-clip {
  overflow: clip;
}
包含 CSS 文字的方形框很棒，它用起来很棒

使用 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，您可以选择性地启用、停用和修改浏览器中某些 API 和 Web 功能的行为。这些政策是您与浏览器之间达成的合约。它们会告知浏览器您的意图是什么。

如果您的代码或您使用的任何第三方库违反了您预先选定的规则，浏览器就会以更好的用户体验替换相应行为，或者直接说“与手交谈”，从而完全阻止 API。

从 Chrome 90 开始，Feature Policy API 将重命名为权限政策，HTTP 标头也随之重命名。同时，相关社区已根据 HTTP 的结构化字段值确定了新语法。

Chrome 90 及更高版本

Permissions-Policy: geolocation=()

Chrome 89 及更早版本

Feature-Policy: geolocation 'none'

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

声明式 Shadow DOM

Shadow DOM 是 Web 组件标准的一部分，可用于将 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>

这使我们享受到了 Shadow DOM 在静态 HTML 中的封装和槽投影的优势。无需 JavaScript 即可生成整个树，包括阴影根。

如需了解详情，请参阅 web.dev 上的声明式 Shadow DOM。

等等

当然，还有许多精彩等着你。

为了向访问支持 HTTPS 的网站的用户提高隐私保护力度，并提高加载速度，Chrome 的地址栏将默认使用 https://。如果您尚未设置从 HTTP 到 HTTPS 的自动重定向，现在便是执行此操作的好时机。

Chrome 桌面版中搭载了 AV1 编码器，该编码器专门针对使用 WebRTC 集成的视频会议进行了优化。

深入阅读

这仅涵盖了部分重要的亮点。如需了解 Chrome 90 中的其他变化，请点击以下链接。

订阅

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

我是 Pete LePage

特别的致辞

我拍摄了 20 世纪 90 年代的这一主题剧集《Chrome 中的新程序》，玩得很开心。非常感谢 Sean Meehan 的创意，以及那些帮助打开 1990 年时光的杰出人物。

GDS 设计

  • 福拉·阿基诺拉
  • 德里克·巴斯
  • 克里斯托弗·博德尔
  • 尼克·克鲁希克
  • 克里斯·沃克

音效设计和其他音乐

  • 布赖恩·戈登 (Bryan Gordon)

当然还有 Loren Borja、Lee Carruthers 和 Lukas Holcek， 我参与了 所有“Chrome 新功能”视频，让我比自己实际表现得更棒了。谢谢！