关于 CSS 的未来：Interop 项目进展与十大核心特性展望
过去几年间，Google、Apple、Microsoft、Mozilla 以及 Igalia 和 Bocoup 等主要浏览器供应商共同致力于 Interop 项目。该项目旨在提升 Web 技术在不同浏览器间的通用支持度，并取得了显著成效。数据显示，在一年内，主要浏览器对关键特性的支持率通常能达到近 100%。
CSS Subgrid 是这一进程中的典型案例。该特性于 2019 年在 Firefox 中率先实现，但长期未在其他浏览器中得到广泛跟进。随着其被纳入 Interop 2023 计划，至当年年底，Subgrid 已在所有现代浏览器中实现了广泛支持。
随着时间推进至 2026 年年底，Interop 2027 的计划正在制定中。Mozilla 团队已建立了一套排名系统，并将依据该数据决定明年的优先开发功能。以下是对投票支持的十大 CSS 新特性的深入解析，其中部分技巧已可在当前环境中使用。
1. CSS 函数 (@function)
当前浏览器支持情况：Chrome 155 和 Edge 154 已支持；Firefox 157 和 Safari 27 尚未支持（截至 2026 年 10月）。更多信息可参考 caniuse。
在 CSS 中引入函数概念是一项备受关注的提案。其语法类似于 JavaScript，允许开发者定义自定义函数并通过 result 指定返回值：
@function --gradient-to-transparent(--color, --direction: bottom) {
result: linear-gradient(
to var(--direction),
var(--color),
transparent;
);
}
.elem {
background: --gradient-to-transparent(red);
}这一特性使得复杂的计算逻辑得以封装。例如，在极坐标与笛卡尔坐标转换的应用场景中：
@function --translate-polar(--angle, --distance) {
result: translate(
calc(cos(var(--angle)) * var(--distance)),
calc(sin(var(--angle)) * var(--distance))
);
}
/* 将元素沿 45° 角移动 100px */
.particle {
transform: --translate-polar(45deg, 100px);
}目前，该功能已在 Chromium 内核浏览器中实现，若被列入 Interop 2027 计划，有望获得更广泛的跨平台支持。
2. 角形属性 (Corner Shape)
当前浏览器支持情况：Chrome 155 和 Edge 154 已支持；Firefox 157 和 Safari 27 尚未支持（截至 2026 年 10月）。
传统的 border-radius 仅能创建圆形矩形边缘。corner-shape 属性提供了连接 DOM 节点四边的替代方案，支持多种形状选项，如 round、squircle、bevel、notch 和 scoop。
其中，Squircle（超椭圆）因产生比标准圆角更平滑、温和的边缘而受到关注，这也是 Apple 多年来采用的设计算法。此外，corner-shape 不仅改变视觉外观，还会影响元素的实际边框形状，确保 border、outline 和 box-shadow 能够正确跟随新的角形轮廓。尽管 Firefox 和 Safari 尚未支持，但该特性可作为渐进增强手段立即投入使用。
3. 边界形状 (Border Shape)
当前浏览器支持情况：Chrome 155 和 Edge 154 已支持；Firefox 157 和 Safari 27 尚未支持（截至 2026 年 10月）。
除了角形，还有单独的 border-shape 提案。该属性允许开发者使用直线、弧线和贝塞尔曲线自定义边界形状。由于它改变了元素的实际边框几何结构，相关的边框样式、轮廓及阴影效果均会随之调整。此外，该属性还支持在不同边界形状之间进行动画过渡。
4. 锚点定位容器查询 (Anchor Positioning Container Queries)
当前浏览器支持情况：Chrome 155 和 Edge 154 已支持；Firefox 157 和 Safari 27 尚未支持（截至 2026 年 10月）。
现代 CSS 中的定位 API 允许将一个元素相对于另一个元素进行定位，例如让浮动工具提示始终附着于触发器，无论其在页面中的位置如何。然而，当目标元素靠近视窗顶部时，传统方法可能导致内容被截断。
现有的定位 API 虽支持备用位置（fallback positions），使元素在空间不足时自动翻转，但缺乏一种机制来判断元素是否处于“翻转”状态。这对于需要动态调整指向箭头方向的工具提示至关重要。定位 API 的第二级版本引入了一种新型容器查询，允许检测目标元素是否使用了备用位置，从而解决这一痛点。
5. CSS inherit() 函数
目前，CSS 中的 inherit 关键字可从父元素继承值，但在嵌套场景下（如嵌套的 border-radius），往往需要对继承值进行微调而非直接复用。
inherit() 函数提案旨在解决这个问题，它允许提取继承值并结合 calc() 进行修改：
p {
border-radius: calc(inherit() - 4px);
}鉴于该功能尚处于初步阶段且未在主流浏览器中实现，其进入 Interop 2027 的可能性存在不确定性，但其潜在的实用性值得关注。
6. 滚动触发动画 (Scroll-Triggered Animations)
当前浏览器支持情况：Chrome 155 和 Edge 154 已支持；Firefox 157 和 Safari 27 尚未支持（截至 2026 年 10月）。
虽然基于滚动的动画（Scroll-driven animations）已作为 Interop 2026 的一部分在所有浏览器中成功实现，允许通过滚动进度控制动画状态，但“滚动触发动画”是一个独立的建议。
滚动触发动画的目标是在用户滚动到特定点时触发关键帧动画，并在特定时间内运行完毕。目前，此类交互主要依赖 JavaScript 中的 IntersectionObserver API 实现。未来若能完全通过 CSS 原生支持，将简化开发流程。
7. CSS 阅读流与阅读顺序 (Reading Flow & Reading Order)
当前浏览器支持情况：Chrome 155 和 Edge 154 已支持；Firefox 157 和 Safari 27 尚未支持（截至 2026 年 10月）。
在响应式设计中，DOM 顺序决定了 Tab 键导航顺序，这可能与视觉布局不符。例如，桌面端左侧列表可能在移动端变为底部按钮，导致辅助技术用户的导航体验混乱。
新的 reading-flow 属性允许指定表格或网格的顺序遵循视觉逻辑：
.grid {
display: grid;
reading-flow: grid-rows;
}对于更复杂的定制需求，reading-order 属性可提供进一步控制。该特性由 Rachel Andrew 倡导，旨在改善无障碍访问体验。
8. 关键字大小动画与 interpolate-size / calc-size()
当前浏览器支持情况：Chrome 155 和 Edge 154 已支持；Firefox 157 和 Safari 27 尚未支持（截至 2026 年 10月）。
长期以来，Web 开发的一大局限是无法在关键字值（如 height: auto）之间进行动画过渡。interpolate-size 属性及相关 calc-size() 函数的提案解决了这一问题。
最常见的用例是实现手风琴式折叠界面的平滑展开与收起：
尽管 Chrome 自 2024 年起已实现该功能，但其他浏览器尚未跟进。开发者可通过 @supports 查询将其作为渐进增强特性使用，以避免在不支持的浏览器中产生延迟。
9. CSS 间隙装饰 (Gap Decorations)
当前浏览器支持情况：Chrome 155 和 Edge 154 已支持；Firefox 157 和 Safari 27 尚未支持（截至 2026 年 10月）。
CSS Grid 的独特之处在于子元素完全由 CSS 定义的行列定位，这与表格布局中每个单元格都有对应 HTML 元素不同。这种独立性使得在网格单元之间添加边框变得困难，特别是当单元格为空时，无法直接应用 border 样式。
gap decorations 提案引入了新的 CSS 属性集，允许直接在网格容器上使用类似边框的语法来绘制分隔线：
rule 属性是简写属性，可指定线条宽度、颜色和样式（虚线/点线/实线）。此外，row-rule 和 column-rule 允许仅在行或列之间绘制线条。
10. 滚动状态容器查询 (Scroll State Container Queries)
当前浏览器支持情况：Chrome 155 和 Edge 154 已支持；Firefox 157 和 Safari 27 尚未支持（截至 2026 年 10月）。
在使用 position: sticky 时，开发者常希望知晓元素当前是否处于“粘滞”状态，以便动态调整样式（如背景色）。该提案引入了一种新型容器查询，用于匹配粘性元素从正常流位置切换至视口锚定位置的状态。
值得注意的是，该 API 不仅限于粘性定位，还可查询各类滚动相关状态。例如，判断滚动容器是否已滚动至顶部或底部，这对于显示滚动指示渐变遮罩非常有用：
当具备向上滚动能力时，scrollable: top 匹配成功，显示伪元素遮罩；当完全滚动至顶部时，该条件不再满足，遮罩隐藏。
结语
随着 Interop 项目步入第七个年头，其对 Web 发展的推动作用有目共睹。尽管当前 Web 开发领域面临 LLM（大语言模型）带来的挑战，许多开发者质疑是否仍需关注最新 CSS 特性，但深入理解这些技术依然至关重要。
由于大多数 LLM 的训练数据存在滞后性，它们可能无法主动利用最新的 CSS 功能。若要构建最佳用户体验，开发者需引导智能代理采用现代 Web 特性，这要求人类专家具备深厚的技术知识。上述提到的许多特性目前已可作为渐进增强手段使用，且预计将在未来获得更广泛的支持。
