以下是您需要知晓的相关信息：
- 容器查询和 :has() 会进行 那就是响应式的天堂
- 全新的 Sanitizer API 为 任意字符串，以帮助减少跨站脚本攻击漏洞。
- 我们在弃用 Web SQL 方面又向前迈进了一步。
- 还有许多其他功能。
我是 Pete LePage。下面我们将深入介绍 了解 Chrome 105 中面向开发者的新功能。
容器查询和 :has() CSS 属性
容器查询是呼声最高的功能之一， Chrome 105。它们使开发者能够在父级选择器中查询其大小， 样式信息，使子元素能够拥有其 自适应样式逻辑，无论它位于页面的什么位置。
它们类似于 @media 查询，不同之处在于它们是根据 而不是视口大小
如需使用容器查询，您需要在父元素上设置包含关系。例如，一张包含图片和一些文本的卡片。
如需创建容器查询，请在卡片容器上设置 container-type。
将 container-type 设置为 inline-size 会查询 inline-direction。
父项的尺寸。
.card-container {
container-type: inline-size;
}
现在，我们可以使用该容器使用
@container。
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card {
grid-template-columns: 1fr;
}
}
在此示例中，当容器小于 400 像素时，容器将切换为 单列布局。
CSS :has() 伪类
我们可以使用 CSS :has() 伪类更进一步。它
可用于检查父元素是否包含具有特定
参数。
例如，p:has(span) 表示包含 span 的段落选择器
。你可以用它来设置父段落本身或任何内容的样式
。或者，您也可以使用 figure:has(figcaption) 设置图形元素的样式
图片说明。
p:has(span) {
/* magic styles */
}
figure:has(figcaption) {
/* this figure has a figcaption */
}
查看 Una 的文章 @container 和 :has()：两个功能强大的全新自适应 API 查看更详细的说明和一些有趣的演示
Sanitizer API
大多数 Web 应用经常会处理不受信任的字符串，但会安全地呈现 可能会有些棘手如果不够注意，就很容易不小心 为跨站脚本漏洞创造机会
有一些库（例如 DomPurify）可以提供帮助，但会在测试中增加 维护负担HTML Sanitizer API 可帮助减少 通过在平台中构建排错程序来修复跨站脚本漏洞。
如需使用 Sanitizer，请创建一个新的 Sanitizer 实例。然后，对setHTML()
元素。
const mySanitizer = new Sanitizer();
const user_input = `<img src="" onerror=alert(0)>`;
elem.setHTML(user_input, { sanitizer: mySanitizer });
Sanitizer API 默认设计为安全可靠，且支持自定义， 您可以指定不同的配置选项 某些元素或允许其他元素
const config = {
allowElements: [],
blockElements: [],
dropElements: [],
allowAttributes: {},
dropAttributes: {},
allowCustomElements: true,
allowComments: true
};
// sanitized result is customized by configuration
const mySanitizer = new Sanitizer(config);
请参阅使用 Sanitizer API 进行安全 DOM 操作 了解详情。
弃用用于不安全上下文的 Web SQL
一段时间前，我们宣布了弃用 Web SQL 的计划。距离开始还有 在 Chrome 105 中，Web SQL 将在不安全环境中被弃用。
如果您要在不安全情境中使用 Web SQL，则应迁移至 IndexDB， 或其他本地存储容器
等等！
当然还有很多其他功能。
- 您现在可以在桌面设备和移动设备上更新已安装 PWA 的名称 更新 Web 应用清单。
- 跨屏窗口展示位置 API 可获取准确的屏幕名称标签。
- 窗口控件叠加层 API 现已可用。可让 PWA 通过将现有的全宽标题栏替换为 小型叠加层。这使您可以在标题栏区域放置自定义内容。
深入阅读
本指南仅涵盖部分重要内容。请访问以下链接 Chrome 105 中的其他变更。
- Chrome 开发者工具的新变化 (105)
- Chrome 105 弃用和下架
- 针对 Chrome 105 的 ChromeStatus.com 更新
- Chromium 源代码库更改列表
- Chrome 发布日历
订阅
要随时掌握最新动态，请订阅 Chrome 开发者 YouTube 频道， ，每当我们发布新视频时，您都会收到电子邮件通知。
我是 Pete LePage Chrome106 发布之后 告诉您 Chrome 中的新变化！