Chrome 90 的新功能

Pete LePage

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

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

我是 Pete LePage，将为您介绍 Chrome 90 中面向开发者的重要信息，用 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 的方形框非常棒，其中的“awesome”会溢出

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

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

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

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

从 Chrome 90 开始，Feature Policy API 将重命名为 Permissions Policy，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

  • Fola Akinola
  • Derek Bass
  • Christopher Bodel
  • Nick Krusick
  • Chris Walker

音效设计和额外音乐

  • Bryan Gordon

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