探索 2022 年 7 月在稳定版和 Beta 版网络浏览器中登陆的有趣功能。
浏览器稳定版
在 7 月份,Firefox 103 和 Safari 15.6 已经是稳定版本,并且通过此功能,我们可以在一些很棒的 CSS 功能上实现互操作性。
backdrop-filter
属性
Firefox 103 包含 backdrop-filter
属性,用于对元素后面的区域应用模糊处理等效果。在 Firefox 中使用此值后,它现在适用于所有三种引擎,但 Safari 要求使用 -webkit
前缀。
scroll-snap-stop
属性
Firefox 还实现了 scroll-snap-stop
属性。通过此属性,您可以控制滚动元素是会越过可能的贴靠位置(默认值为 normal
),还是必须贴靠第一个位置(值为 always
)。现在,所有三个浏览器引擎中都有 scroll-snap-stop
属性。
Safari 15.6 版本主要用于解决问题,但它确实使用 :modal
伪类增加了一项新的 CSS 功能。Firefox 103 中也提供了此功能。:modal
伪类会在元素关闭之前无法与该元素外部的所有内容进行交互时选择该元素。例如,使用 showModal()
打开的 dialog
元素。
Beta 版浏览器版本
通过 Beta 版浏览器,您可以预览浏览器下一个稳定版本的新功能。不妨趁此时机测试一下新功能或内容移除,这些新功能或内容可能会在全球发布之前对您的网站产生影响。
由于发布日期就在当月之外,因此 6 月唯一新的 Beta 版是 Firefox 104。
Firefox 104 中包含 Web Workers 中的 CSS Font Loading API 以及 CSS animation-composition
属性,后者用于定义多个动画同时影响同一属性时使用的合成操作。
上个月提到的 Safari 16 Beta 版仍在开发中。
这些 Beta 版功能很快就会在稳定版浏览器中推出。
“网络新体验”系列视频的一部分