CSS 从样式查询到锚点定位的实用进化

CSS 进化呈现出明显的务实转向：不再追求颠覆性的语法革命，而是集中解决组件化开发、排版精细控制与交互状态管理中的真实痛点。根据 Baseline 每月度摘要与 MDN 的更新记录，近期落地的特性大多围绕“减少对 JavaScript 的依赖”与“提升样式声明性”展开。以下梳理值得关注的核心更新。

容器查询的维度拓展：样式查询正式可用

容器查询早已不是新闻，但 2026 年 5 月起进入 Baseline 新可用状态的容器样式查询（Container Style Queries） 改变了游戏规则。此前容器查询主要依赖元素的尺寸（container-type: size/inline-size）来切换样式，而现在可以直接根据父容器的自定义属性来应用样式。

这意味着组件可以基于上下文主题自动适配，而无需依赖复杂的外层类名切换。例如，一个卡片组件放在“紧凑”或“宽松”的容器中时，只要容器设置了对应的自定义属性，卡片内部的间距与字号即可自动响应。这对于设计系统与模块化组件的维护是实质性减负。

交互状态的原生表达：:open 与 :user-invalid

表单与交互元素的状态样式长期依赖属性选择器或 JavaScript 类名切换，2026 年这两个场景都有了更干净的方案。

:open 伪类在 5 月进入 Baseline 新可用状态。它直接匹配当前处于“打开”状态的元素，包括设置了 open 属性的 <details> 与 <dialog>，以及下拉选择器展开时的 <select> 和颜色选择器展开的 <input type="color">。此前需要写 details[open] 或通过 JS 监听状态变化，现在只需 details:open 即可声明样式。

另一项虽未在本次搜索结果中作为“新特性”突出，但值得留意的是 :user-invalid 的广泛可用。与页面加载即触发的 :invalid 不同，该伪类仅在用户与表单控件交互之后才匹配无效状态，避免了页面一打开就满屏红框的糟糕体验。

锚点定位的精细化：@position-try 与 position-try-order

CSS 锚点定位（Anchor Positioning）是近年来布局领域最重要的补充之一，2026 年初的更新让它更贴近实际生产需求。

@position-try 规则允许开发者为一组回退定位选项命名。当锚点元素移动导致定位元素即将溢出视口时，浏览器会自动从开发者预设的 @position-try 选项中挑选第一个能让元素重新完整显示的位置。这解决的是 tooltip、下拉菜单在边缘位置被裁剪的经典难题。

配合使用的 position-try-order 属性（2026 年 2 月 Baseline 新可用）则控制回退选项的选择优先级。默认的 normal 不做尝试，而 most-height 或 most-width 会让浏览器选择能让定位元素获得最大可用高度或宽度的回退方案。对于自适应浮层而言，这比手动计算边界要可靠得多。

排版与媒体细节的精细控制

几个小而实用的属性在 2026 年落地，解决的是特定场景下的“最后一公里”问题。

lh 与 rlh 单位进入广泛可用状态。lh 等于当前元素的计算行高，rlh 则基于根元素行高。以往要让图标徽章或行内高亮背景恰好等于一行文字的高度，需要手动推算 em 或使用不稳定的行高继承，现在直接写 height: 1lh 即可。

text-decoration-skip-ink: all 为下划线处理提供了更彻底的控制。默认的 auto 只在下划线穿过字母降部（如 g、y、p 的尾巴）时跳过墨迹，而 all 会无条件跳过所有字形，包括中日韩字符。对于包含 CJK 文本的多语言站点，这可以避免下划线与汉字笔画视觉冲突的问题。

image-rendering 属性本身不新，但其在 Baseline 中的稳定支持值得像素艺术与二维码场景关注。通过设置 pixelated 或 crisp-edges，可以强制浏览器在缩放位图时使用最近邻插值，保持边缘锐利而非模糊。

值得留意的周边更新

虽然严格来说不属于 CSS 特性，但 SharedWorker 在 2026 年 5 月进入 Baseline 新可用状态，对多标签页状态同步有直接帮助。它允许同源的不同窗口、标签页或 iframe 共享同一个后台线程，适合管理跨标签的登录态或实时协作场景。

此外，Chrome 与 Edge 在 2026 年上半年推进了仅命名容器查询（无需设置 container-type 即可按名称查询）以及 @supports 中对 at-rule() 函数的支持，后者让 CSS 能够直接检测某个 @ 规则是否被支持，而非只检测属性值。这些改动虽小，但反映了 CSS 基础设施正在向更可编程的方向演进。

整体来看，2026 年的 CSS 更新没有制造学习焦虑，而是把已经验证过的方向（容器查询、锚点定位、状态伪类）打磨到了可以放心投入生产环境的程度。对于一线开发者而言，最务实的策略是从 :open、lh 单位和 text-decoration-skip-ink: all 这类零迁移成本的小特性开始用起，再逐步将组件架构向样式查询与锚点定位回退方案上迁移。