Chrome 105 的新变化

Pete LePage

以下是您有必要知道的信息：

我是 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;
  }
}

在这种情况下，当 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 Developers YouTube 频道，每当我们发布新视频时，您都会收到电子邮件通知。

我是 Pete LePage