以下是您有必要知道的信息:
- CSS
overflow
属性使用了新值。 - Feature Policy API 已重命名为权限政策。
- 还有一种可以直接在 HTML 中实现和使用 Shadow DOM 的新方法。
- 我在 20 世纪 90 年代买了几件几乎完全一样的夹克。
- 此外,还有许多其他功能
我叫 Pete LePage,我为 Chrome 90 的开发者介绍了 411,体验 1990 风格的体验!
使用 overflow: clip
防止溢出
CSS 就是这些,而且是一大堆筹码!但我认为每位 Web 开发者都见过和遇到过一些让自己感到尴尬的情况。CSS 技巧中有一篇很棒的博文,介绍了处理溢出的不同方式,例如使用 overflow: hidden
或 auto
。
CSS 溢出规范中新增了一个 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,您可以选择性地启用、停用和修改浏览器中某些 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 开发者工具的新变化 (90)
- Chrome 90 弃用和移除
- Chrome 90 的 ChromeStatus.com 更新
- Chrome 90 中的 JavaScript 的新变化
- Chromium 源代码库更改列表
订阅
如果您想及时了解我们的视频,请订阅我们的 Chrome 开发者 YouTube 频道,这样,每当我们发布新视频时,您都会收到电子邮件通知。
我是 Pete LePage
特别的致辞
我拍摄了 20 世纪 90 年代的这一主题剧集《Chrome 中的新程序》,玩得很开心。非常感谢 Sean Meehan 的创意,以及那些帮助打开 1990 年时光的杰出人物。
GDS 设计
- 福拉·阿基诺拉
- 德里克·巴斯
- 克里斯托弗·博德尔
- 尼克·克鲁希克
- 克里斯·沃克
音效设计和其他音乐
- 布赖恩·戈登 (Bryan Gordon)
当然还有 Loren Borja、Lee Carruthers 和 Lukas Holcek, 我参与了 所有“Chrome 新功能”视频,让我比自己实际表现得更棒了。谢谢!