Chrome 105：面向开发人员的新功能

[sakib60]

几周前，谷歌推出了其浏览器的新版本：Chrome 105，它为网络开发人员引入了改进和新功能，因此，如果您是其中之一，那么您可能会对它用于您的专业网站感兴趣。最值得注意的新功能是新的容器查询和新的 Sanitizer API，它们使处理器对任意字符串更加健壮，并有助于减少漏洞。


容器查询和 :has() CSS 属性
容器查询在 Chrome 105 中推出，允许开发人员从父选择器获取大小和样式信息。这样，子元素将独立于您的响应式样式逻辑，并且它在页面上的什么位置都无关紧要。

它们类似于媒体查询，但它们评估的是容器大小而不是视口大小。

要使用容器查询，我们需要指出父元素包含什么。例如，让我们创 罗马尼亚电报号码数据 建一张卡片，其中包含相应的图像和附带的文字。

我们将设置容器类型为卡片容器来创建您的查询。我们选择内联大小的容器类型并检查内联方向。

.card-container {
容器类型：内联大小；
}
使用@container我们可以将样式应用于它的任何子元素。

.card {
显示：网格；
网格模板列：1fr 1fr；
}

@container (最大宽度： 420px) {
.card {
grid-template-columns： 1fr;
}
}
示例中，如果容器小于420px，则仅显示在一列中。

:has() CSS 属性
使用:has()伪类，我们可以知道主元素是否具有具有特定参数的次要元素。

例如，p:has(span) 显示一个带有跨度的段落选择器。这使我们能够设置主段落本身或其中的任何内容的样式。

要设置包含标题的图形元素的样式，我们还可以使用 figure:has(figcaption)。