Interop 2027 候选清单：CSS 函数、squircle 圆角与滚动状态查询
来源：joshwcomeau.com — 2026-10-20
📋 概述
浏览器厂商联合推进的 Interop 项目进入第七年，Mozilla 开了排行榜页面让大家给自己最想要的特性投票，结果将决定明年的清单。Josh Comeau 列出他投的十项，等于给未来一年的 CSS 画了张预览图：@function 让 CSS 拥有可复用函数，corner-shape 提供 squircle、bevel、notch、scoop 四种角的连接方式并真正改变 border-box，border-shape 允许用直线、圆弧与贝塞尔自绘边框，锚点容器查询则能问出浮层当前是否用了 fallback 位置。
🔑 核心要点
- @function 让 CSS 定义可复用函数，他用它把极坐标直接换算成 translate，Chromium 已实现
- corner-shape 与 border-shape 改的是真实 border-box，边框、轮廓、阴影都会跟着新形状走，这是 clip-path 做不到的
- reading-flow / reading-order 解决响应式布局下 Tab 顺序永远按 DOM 走、与视觉顺序脱节的无障碍问题
- 滚动相关占两项：scroll-triggered animations 用 CSS 替代 IntersectionObserver，scroll-state 容器查询能判断 sticky 是否已吸附、容器是否滚到顶或底
- 兼容性态度明确：这些特性多数可当 渐进增强 今天就用，等它变成基线再完整依赖
💡 金句
We can’t expect LLMs to use modern CSS features when so much of their training data is years old.
👍 0
👎 0
← 返回 Lobsters 首页