了解 2022 年 8 月在稳定版和 Beta 版网络浏览器中推出的一些有趣功能。
稳定版浏览器
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;
}
}
如需详细了解容器查询,请参阅@container 和 :has(): 两个强大的响应式新 API 即将在 Chromium 105 中推出一文。
:has() 父级伪类
上述帖子还提到了 :has()
。这个新的伪类 CSS :has() 伪类可让您根据条件定位父元素和同胞兄弟。如需了解详情,请参阅:has() 家庭选择器。
Sanitizer API
Chrome 105 中还包含 Sanitizer API。此 API 会将清理功能内置到平台中,以帮助消除跨站脚本攻击漏洞。
Chrome 105 中还新增了 :modal CSS 伪类。这会匹配处于以下状态的元素:该元素会排除与其外部元素的所有互动。例如,使用 showModal()
API 打开的 <dialog>
。
findLast() 和 findLastIndex() 方法
Firefox 104 为 Array.prototype.findLast()、Array.prototype.findLastIndex()、TypedArray.prototype.findLast() 和 TypedArray.prototype.findLastIndex() 方法添加了标志支持。这些方法用于分别查找与所提供的测试函数匹配的数组或 TypedArray 中的最后一个元素的值和索引。
Beta 版浏览器
通过浏览器 Beta 版,您可以抢先体验即将推出的浏览器稳定版中提供的功能。在全球用户获得该版本之前,您可以先测试可能会影响您网站的新功能或移除的功能。
由于发布日期刚好超出当月,8 月唯一的新 Beta 版是 Firefox 105,目前还没有太多详细信息。
6 月提及的 Safari 16 Beta 版测试仍在进行中。