探索 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 是一个激动人心的版本,为网络平台带来了期待已久的容器查询功能。媒体查询提供了一种针对视口大小进行查询的方法,而容器查询提供了一种针对容器大小进行查询的方法。
如需使用容器查询,请使用 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 and :has(): 2 个在 Chromium 105 中推出的全新自适应 API 这篇博文。
: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() 方法的标记后,它们分别用于查找与 Array 或 TypedArray 测试中匹配的最后一个元素的值和索引。
Beta 版浏览器版本
通过 Beta 版浏览器,您可以预览浏览器下一个稳定版本的新功能。不妨趁此时机测试一下新功能或内容移除,这些新功能或内容可能会在全球发布之前对您的网站产生影响。
由于发布日期就在当月之外,因此 8 月唯一一款新的 Beta 版是 Firefox 105,其目前提供的细节尚不完善。
6 月份提到的 Safari 16 Beta 版也仍在持续运行。
“网络新体验”系列视频的一部分