以下是您有必要知道的信息:
- 容器查询和 :has() 是响应式天堂中的匹配。
- 新的 Sanitizer API 可为任意字符串提供强大的处理器,以帮助减少跨站脚本攻击漏洞。
- 我们在弃用 Web SQL 方面又迈出了一步。
- 还有许多更多内容。
我是 Pete LePage。我们一起来深入了解 Chrome 105 并为开发者带来了哪些新功能
容器查询和 :has()
CSS 属性
Chrome 105 中正式发布了容器查询,这是呼声最高的功能之一。借助它们,开发者能够查询父选择器来了解其大小和样式信息,从而使子元素无论位于页面上的哪个位置,都能拥有其自适应样式设置逻辑。
此类查询与 @media 查询类似,不同之处在于前者根据容器的大小(而非视口的大小)进行评估。
![容器查询与媒体查询。](https://developer.chrome.google.cn/static/blog/new-in-chrome-105/image/container-query-vs-media-f263d60a5e21b.png?authuser=8&hl=lv)
若要使用容器查询,您需要对父元素设置包含。例如,您的卡片可能带有图片和一些文字。
如需创建容器查询,请在卡片容器上设置 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;
}
}
在这种情况下,当 container 小于 400px 时,它会切换为单列布局。
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 and :has():两个功能强大的全新自适应 API。
Sanitizer API
大多数 Web 应用经常会处理不受信任的字符串,但安全地呈现相应内容可能会非常复杂。如果不够谨慎,很容易在无意间创造跨站脚本漏洞。
有些库(例如 DomPurify)可以提供帮助,但会增加少量的维护负担。HTML Sanitizer API 将清理功能内置于平台中,从而帮助减少跨站脚本攻击漏洞的数量。
如需使用该工具,请创建一个新的 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 或其他本地存储容器。
还有更多其他奖励!
当然还有很多。
- 现在,您可以通过更新 Web 应用清单,在桌面设备和移动设备上更新已安装 PWA 的名称。
- 跨屏窗口放置 API 可获取准确的屏幕名称标签。
- 窗口控件叠加层 API 现已可用。它可以将现有的全宽标题栏替换成一个小叠加层,让 PWA 提供更类似于应用的感觉。这样,您就可以在标题栏区域放置自定义内容。
深入阅读
这仅涵盖了部分重要的亮点。如需了解 Chrome 105 中的其他更改,请访问以下链接。
- Chrome 开发者工具的新变化 (105)
- Chrome 105 弃用和移除
- 针对 Chrome 105 的 ChromeStatus.com 更新
- Chromium 源代码库更改列表
- Chrome 发布日历
订阅
如需随时了解最新动态,请订阅 Chrome Developers YouTube 频道,每当我们发布新视频时,您都会收到电子邮件通知。
我是 Pete LePage