此页面由 Cloud Translation API 翻译。

8 月新增 Web 平台

了解 2022 年 8 月在稳定版和 Beta 版网络浏览器中推出的一些有趣功能。

Rachel Andrew

稳定版浏览器

8 月，Firefox 104、Chrome 104 和 Chrome 105 均已发布稳定版。

Chrome 104 包含 CSS 转换的各个属性。这些属性是 scale、rotate 和 translate，可用于单独定义转换的这些部分。

为此，Chrome 将加入已经支持这些属性的 Firefox 和 Safari。

浏览器支持

Chrome 104 还包含媒体查询范围语法。Firefox 已发布此功能，有助于简化媒体查询。例如，以下媒体查询：

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

可以使用比较运算符编写：

@media (width >= 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

浏览器支持

Chrome 105 是一款令人兴奋的版本，它为 Web 平台带来了期待已久的容器查询功能。虽然媒体查询可让您查询视口的大小，但容器查询可让您查询容器的大小。

浏览器支持

如需使用容器查询，请使用 container-type 属性启用包含关系。

.card-container {
  container-type: inline-size;
}

将 container-type 设置为 inline-size 会查询父元素的内嵌方向尺寸。对于英语等拉丁语言，这将是卡片的宽度，因为文本会从左到右内嵌流动。

现在，我们可以使用该容器使用 @container 为其任何子项应用样式：

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}

上述帖子还提到了 :has()。这一新的伪类 CSS :has() 伪类可让您根据条件定位父元素和同级元素。如需了解详情，请参阅 :has() 家庭选择器。

浏览器支持

Chrome 105 中还包含 Sanitizer API。此 API 会对平台进行清理，帮助移除跨站脚本漏洞。

Chrome 105 中还新增了 :modal CSS 伪类。这会匹配处于以下状态的元素：该元素会排除与其外部元素的所有互动。例如，使用 showModal() API 打开的 <dialog>。

浏览器支持

Firefox 104 为 Array.prototype.findLast()、Array.prototype.findLastIndex()、TypedArray.prototype.findLast() 和 TypedArray.prototype.findLastIndex() 方法添加了标志支持。这些方法用于分别查找与所提供的测试函数匹配的数组或 TypedArray 中的最后一个元素的值和索引。

浏览器支持

测试版浏览器可让您预览下一个稳定版中所包含的内容。在全球用户获得该版本之前，您可以先测试可能会影响您网站的新功能或移除的功能。

由于发布日期刚好超出当月，8 月唯一的新 Beta 版是 Firefox 105，目前还没有太多详细信息。

6 月提及的 Safari 16 Beta 版测试仍在进行中。