发布时间:2026 年 3 月 2 日
欢迎阅读 2026 年 1 月的 Baseline 摘要。每个月,我们都会重点介绍在 Baseline 中达到新里程碑的 Web 平台功能,帮助您了解目前可以在自己的项目中使用哪些工具。
1 月份是精彩的一年开端,多项重要 API 和 CSS 单位进入“新近可用”类别,同时一项重大布局改进进入“广泛可用”类别。
“Baseline 新近可用”功能
以下 Web 功能于 2026 年 1 月进入“Baseline 新近可用”阶段。
Active View 过渡
:active-view-transition CSS 伪类现已成为“Baseline 新近可用”功能。此选择器允许开发者在视图过渡进行期间专门定位和设置文档根元素的样式。这对于应用仅在过渡期间存在的全局样式或调整非常有用,例如更改过渡叠加层的背景颜色或调整特定图层的 z-index 以确保流畅的视觉效果。
Service Worker 中的 JavaScript 模块
Service Worker 现在支持 JavaScript 模块,适用于所有主流浏览器引擎。通过在调用 navigator.serviceWorker.register() 时设置 type: 'module' 选项,您可以在 Service Worker 脚本中使用标准 import 和 export 语句。这使得 Service Worker 符合现代 JavaScript 开发实践,从而实现更好的代码组织、更轻松的依赖项管理,以及在主线程和后台工作器之间共享代码的能力。
Navigation API
Navigation API 是一种现代化的专用替代方案,可替代旧版 History API,专门为单页应用 (SPA) 的需求而设计。它提供了一种集中式方式来发起、拦截和管理所有类型的导航操作,包括由浏览器的后退和前进按钮触发的操作。借助 Maps 等事件,开发者可以实现更流畅的客户端路由,且所需的样板代码更少。如需深入了解此功能如何改变我们构建 Web 应用的方式,请参阅我们的专门博文:现代客户端路由:Navigation API。
rcap 个 CSS 单位
rcap 单位是一种相对于根字体长度的单位,等于根元素字体的“大写字母高度”(大写字母的名义高度)。这样一来,排版布局就可以精确地根据网站上使用的主要字体进行缩放,而不仅仅是根据字体大小进行缩放。
rch 个 CSS 单位
与 ch 单位类似,但相对于根元素,rch 单位表示根元素字体中“0”(零)字形的宽度(更具体地说,是预先测量值)。它非常适合创建依赖于字符宽度的布局,例如应精确容纳根字体中特定数量字符的容器。
rex 个 CSS 单位
rex 单位是 ex 的根相对版本,等于根元素字体的 x 高度。此单位特别适合用于垂直对齐元素,以及根据文档主要排版中小写字母的高度调整元素大小。
ric 个 CSS 单位
ric 单位是 ic 单位的根相对等效项。它等于根元素字体的“表意文字”预先测量值(通常是 CJK 表意文字的宽度或高度)。对于构建国际化布局的开发者(尤其是使用中文、日语或韩语脚本的开发者)来说,这是一个至关重要的工具。
“Baseline 广泛可用”功能
以下 Web 功能于 2026 年 1 月达到“Baseline 广泛可用”阶段。
双值 CSS display 属性
display 属性的多关键字语法现已达到“Baseline 广泛可用”级别。此更新可让您明确定义盒子的“外部”和“内部”显示类型。例如,您可以使用 display: inline flex,而不是预组合字符 inline-flex。这可明确元素是参与块级还是内联级流(外部类型),以及其子元素的布局方式(内部类型,如 flex 或 grid)。此更改使 CSS 布局引擎对开发者而言更具逻辑性和一致性。
animation-composition CSS 属性
animation-composition 属性用于定义多个动画同时影响同一属性时应如何互动。您可以选择 replace、add 或 accumulate,从而精确控制复杂的分层动画的计算方式。
按复制方式排列
JavaScript 现在包含可让您转换数组而不会改变原始数据的方法。toReversed()、toSorted() 和 toSpliced() 等方法会返回数组的新修改副本,从而促进更具功能性和安全性的编程风格。
帮助我们不断改进
与往常一样,如果您发现我们遗漏了任何与 Baseline 相关的内容,请告知我们,我们会确保在未来的版本中添加相应内容!如果您有任何疑问或想针对 Baseline 提供反馈,可以在我们的问题跟踪器中提交问题。