发布时间:2026 年 6 月 3 日
欢迎阅读 Baseline 月度摘要。2026 年 5 月,一些新的 CSS 功能、事件属性和 API 添加项进入“Baseline 新近可用”阶段,而 CSS 单位、用户互动属性和伪类则进入“Baseline 广泛可用”阶段,同时开发者社区也发布了重要更新。
2026 年 CSS 现状调查
网络社区的年度脉搏调查已启动:2026 年 CSS 现状调查现已开放。今年,组织者有意识地对调查进行了改进,重点关注在 AI 辅助编码时代对开发者最重要的功能。浏览器供应商会密切关注这些结果,以帮助确定工程路线图的优先级并解决开发者的痛点。请务必在 7 月 1 日调查结束前分享您的观点和经验,共同塑造不断发展的 CSS 格局。
Baseline 新近可用功能
截至 2026 年 5 月,核心浏览器集支持本部分中的功能,这些功能现已进入“Baseline 新近可用”阶段。
容器样式查询
容器查询不再仅限于大小。借助样式查询,您现在可以根据父容器的自定义属性将样式应用于元素。这样,您就可以构建高度模块化的组件,这些组件可以根据其内容相关展示位置调整主题或样式,而无需依赖复杂的类结构。
如需了解详情,请参阅 @container 的 MDN 参考页面。
:open 伪类
以前,为具有打开和关闭状态的元素(如 <dialog> 和 <details>)设置样式需要检查属性或管理类。:open
伪类通过仅在这些元素当前处于打开状态时匹配它们来简化此过程,从而实现更简洁、更具声明性的 CSS。
如需了解详情,请参阅 :open 伪类的 MDN 页面。
ToggleEvent.source
使用 Popover API 时,对状态变化做出反应至关重要。ToggleEvent 接口的 source
属性会返回触发弹出式窗口切换操作的控制元素。这样,您就可以识别事件的来源并协调复杂的界面互动。
如需了解详情,请参阅 ToggleEvent.source 的 MDN 文档。
image-rendering 属性
借助 image-rendering CSS 属性,您可以控制调整图片大小时使用的缩放算法。这对于像素画、低分辨率图片或二维码尤其有用,因为在这些情况下,避免模糊插值并保持缩放清晰和像素化非常重要。
如需了解如何使用此属性,请参阅 image-rendering 的 MDN 页面。
text-decoration-skip-ink: all
穿过降部的下划线有时看起来会很杂乱。虽然 text-decoration-skip-ink: auto
仅在相交时跳过墨迹,但将其设置为 all 会强制下划线跳过所有字形,无论是否相交,从而更好地控制排版美观性。
如需了解详情,请参阅 text-decoration-skip-ink 的 MDN 指南。
SharedWorker
SharedWorker API 提供了一个专用后台工作器,可以从多个浏览上下文中访问,例如同一来源的不同窗口、标签页或 iframe。这对于跨标签页边界共享状态、管理连接或协调后台任务非常有用。
Baseline 广泛可用功能
以下功能已进入“Baseline 广泛可用”阶段,这意味着这些功能现在具有广泛的兼容性,可以在您的项目中使用。
lh 长度单位
lh 相对单位对应于使用它的元素的计算行高。这样,您就可以更轻松地调整元素(例如图标徽章或背景突出显示)的大小,使其与文本行的行高完美匹配。
如需了解详情,请参阅长度单位的 MDN 参考文档。
rlh 长度单位
与 lh 类似,rlh 单位表示行高,但专门针对根元素 (<html>)。这样,无论本地字体大小或行高是否被替换,您都可以在整个页面中建立一致的垂直节奏。
如需了解详情,请参阅长度单位的 MDN 参考文档。
Navigator.userActivation
许多 Web API(例如视频播放、弹出式窗口或剪贴板访问)都需要用户互动才能触发。Navigator.userActivation
属性会返回一个对象,其中包含有关用户在窗口上的当前和历史激活状态的信息,让脚本可以验证是否发生了用户手势。
如需了解如何使用此属性,请参阅 Navigator.userActivation 的 MDN 页面。
clip-path
借助 clip-path CSS 属性,您可以创建一个剪切区域,用于定义元素的哪些部分应可见。通过使用基本形状(例如圆形、椭圆形或多边形)或
SVG 路径,您可以创建引人入胜的布局设计和过渡效果,而无需隐藏溢出内容。
如需了解实现详情,请参阅 clip-path 的 MDN 页面。
:user-invalid 伪类
与页面加载后立即应用样式的 :invalid(通常会导致不良用户体验)不同,:user-invalid 伪类仅在用户与无效表单元素互动后才匹配这些元素。
这意味着您可以在用户离开字段后显示表单验证反馈。
如需了解其工作原理,请参阅 :user-invalid 的 MDN 文档。
大功告成
如果您发现我们遗漏了任何与 Baseline 相关的内容,请告诉我们,我们会在以后的版本中确保将其纳入!如果您有任何疑问或想提供有关 Baseline 的反馈,可以在我们的问题跟踪器中提交问题。