Interop 2027 投票开启：CSS 正在长成一门真正的编程语言
Interop 2027 投票开启，Josh Comeau 列出他投票的 10 个 CSS 新特性：@function、corner-shape、inherit()、interpolate-size……本期访谈聊聊 CSS 从样式表长成编程语言的路上，HN 评论区在吵什么。
浏览器厂商们又凑到一起投票了。Google、Apple、Microsoft、Mozilla，加上 Igalia 和 Bocoup，这些平时在标准会上吵架的对手，每年都会通过 Interop 项目联手消灭一批兼容性坑：哪个特性被投进 Interop，往往一年之内就在全平台达到近 100% 支持。CSS Subgrid 就是例子——2019 年只有 Firefox 支持，进了 Interop 2023 之后，年底四大浏览器全部跟上，测试通过率从 12% 干到 91%。现在 Interop 2027 正在筹备，Mozilla 做了个投票排名站，让开发者给最想要的特性投票。Josh Comeau 顺势写了篇长文，列出他投的 10 个 CSS 新特性，从 @function 到 corner-shape，个个都让 HN 评论区吵了起来。我请来老朋友陆则明——前端架构工程师，天天和页面渲染、兼容性打交道——聊聊这份"CSS 未来图鉴"到底靠不靠谱。
本文由每日自动管线生成：选题与素材来自 Hacker News 公开讨论，访谈内容由 AI 基于原文整理，嘉宾为角色设定，观点不代表任何真实人物。
小听： 则明，先问个大的。Interop 这种"浏览器厂商联手修 bug"的机制，七年了还越办越热闹，你怎么看？这在软件行业里是不是挺反常的——竞争对手坐下来给对方擦屁股。
陆则明： 反常，但合理。浏览器这个行当有个特殊之处：兼容性坑是负外部性，谁都不想背。你今天在 Chrome 上修了一个渲染差异，等于帮 Safari 和 Firefox 的用户也修了，反过来也一样。Subgrid 那个 12% 到 91% 的曲线就是证明——单打独斗五年没动静，联手一年搞定。投票机制更妙，它把"开发者真正想要什么"变成了排期依据，而不是各家产品经理拍脑袋。对天天写兼容代码的前端来说，这是为数不多"许愿真的有用"的场合。
小听： 那看 Josh 的愿望清单。第一个就是王炸：CSS 函数。@function 定义，result 返回值，调用长得跟 JS 函数一模一样。HN 有人直接开问：我们真的想要 CSS 里有函数吗？这船不是早就开了吗——CSS 早就图灵完备了。
陆则明： 问得好，而且答案是：船确实早就开了，但以前都是偷渡。calc()、var()、各种条件逻辑，CSS 早就在用"样式表语法"硬拗编程语言做的事。@function 只是第一次给了个正经名分。Josh 举的那个极坐标转直角坐标的例子很说明问题：做粒子动画时，--translate-polar(45deg, 100px) 这种调用，比手写一串 calc(cos() * ...) 清楚一个数量级。跟 Sass 的 mixin 最大的区别是：这是运行时的，原生支持，不需要构建步骤。对了，评论区那句"programming in YAML"说得刻薄但精准——声明式语言一路加功能，最后都会长成"用别扭语法写函数"。
小听： 第二个 corner-shape 就很直观了：圆角之外，squircle（超椭圆圆角，苹果用了好多年）、bevel（斜切角，科幻 UI 神器）、notch、scoop。Josh 说他一开始最馋 squircle，用着用着发现 bevel 才是真爱，做了一堆赛博朋克界面。
陆则明： 这个特性的含金量在于一句话：它改变的是 border-box 本体。以前用 clip-path 也能切出斜角，但边框、描边、阴影全都不会跟过去——切的是视觉，盒子还是方的。corner-shape 是连盒子一起改，border、outline、box-shadow 全部正确跟随。更关键的是用法心态：现在 Chrome/Edge 有了，Firefox/Safari 还没有，但它是完美的渐进增强——不支持就退化成普通圆角，页面不崩。这就是 HN 高赞那句要反复念的经。
小听： 你说的是那条"Say it with me"：新特性被广泛支持是好事，但让基础功能依赖新特性是坏事。
陆则明： 对，FDEUp 那条评论是全文定海神针。Josh 自己每介绍一个特性都要补一句"可以做渐进增强"，不是客气，是 CSS 社区的生存智慧。@supports 查询就是干这个的：先检测，再上强度。
新语法长得再怪，也是给边角打磨的刻刀。
小听： 第三个 border-shape 更激进：直接用直线、圆弧、贝塞尔曲线自己画边框，还能做动画。配合 corner-shape，感觉 CSS 在往"矢量绘图工具"进化。
陆则明： 是，而且这对设计师出身的前端是解放。以前那种"卡片顶部有个圆形凹槽托着金币"的设计，交付给前端就是一场噩梦：SVG 蒙版、负 margin、伪元素叠罗汉。现在边框形状本身可编程，画完直接加 border 和 outline 就出效果。评论区有人怀念 DSSSL——CSS 的老祖宗本来就是 Scheme 方言，是门正经编程语言。兜兜转转三十年，CSS 终于开始长回它祖宗的样子。
小听： 第四个，锚点定位的"第二级"：anchored container queries。第一代锚点定位解决了 tooltip 跟着触发器跑，但有个缺口——CSS 里没法知道 tooltip 是不是翻转到了备用位置，也就没法给那个"指向触发器的小尖角"换方向。
陆则明： tooltip 定位是前端十大噩梦之一，长期霸榜。第一代 API 给了 fallback 位置：放不下就自动翻到另一边。但翻是翻了，样式不知道——小尖角还指着原来的方向，视觉就穿帮了。Level 2 的容器查询就是补这块拼图：能查询目标元素当前用的是默认位置还是 fallback。这类"差一点就完美"的 API 最考验标准组织的耐心，Interop 投票就是给这种特性续命的。
小听： 第五个 inherit()，评论区有人说等了好久：把继承来的值拿出来，还能用 calc() 加工，比如 border-radius: calc(inherit() - 4px)，解决嵌套圆角层层递减的老痛点。
陆则明： 对，这是"小而美"的典范。现在的 inherit 关键字是全盘接收，不多不少——父元素圆角 16px，子元素也只能 16px，嵌套起来内外圆角对不齐，视觉上就是别扭。inherit() 把继承从"关键字"变成"函数"，值拿过来还能再算一遍。Josh 自己都承认这特性八字没一撇，caniuse 都查不到，进 Interop 2027 希望不大。但投票的意义就在这：让浏览器厂商知道，有一帮人在排队等。
小听： 第八个 interpolate-size 我要单独拎出来：终于能给 height: 0 到 height: auto 做动画了。手风琴折叠 UI，多少前端为此写过 JS 量高度的脏代码。
陆则明： 这个我投一票"最解恨"。interpolate-size: allow-keywords 一开，<details> 元素的展开收起就是纯 CSS 过渡，不需要 JS 先量 scrollHeight 再写内联样式。评论区 paczki 那句特别真实：现代 CSS 越来越好玩，他正在把"大块大块的 JS"换成 CSS。@scope、@layer、:has()，再加上这个，CSS 正在系统性地吃掉那些"以前必须用 JS"的领地。这不是抢饭碗，这是把 JS 还给真正需要它的地方。
标准这东西，光照到的地方才算数。
小听： 还有两个跟"状态感知"有关的：reading-flow 让 Tab 键顺序跟随视觉顺序，而不是 DOM 顺序；scroll-state 容器查询能知道 sticky 元素是不是正吸在视口顶部。
陆则明： 这两个都是"响应式时代的还债"。reading-flow 解决的是真痛点：桌面端和移动端用同一套 DOM、不同 Grid 排布，视觉顺序变了，Tab 顺序还按 DOM 走，用键盘和读屏软件的用户就迷路了。Rachel Andrew 推了好久，终于看到曙光。scroll-state 更妙：@container scroll-state(stuck: top)，sticky header 吸顶瞬间换个底色、加条阴影，以前得靠 IntersectionObserver 写 JS，现在一行 CSS。状态从 JS 手里交还给 CSS，是这份清单里反复出现的主题。
小听： 泼两盆冷水。第一盆来自 jamienk：CSS 还是没法 tree-shaking，老项目的样式文件照样长成怪物，新特性越多，怪物越大。
陆则明： 这盆水泼得对，而且短期无解。CSS 的"用没用过"是个全局判定，不像 JS 模块有明确的导入导出关系——评论区也有人指出，没有 CSS Modules 的话，你根本不知道一个类名会在哪被用到。这是语言设计层面的债，新特性还不清。不过 @layer 和嵌套确实让"怪物"好管理了一些：至少现在能分层、能就近组织，不再是三千行平铺。工具链层面，Lightning CSS 这类新工具也在补课。我的态度是：先享受新特性，屎山慢慢铲。
小听： 第二盆：CharlesW 说浏览器更新这么激进，"等 5 到 10 年"已经是老黄历了，新特性一年就普及。这是不是意味着"渐进增强"那套谨慎哲学可以退休了？
陆则明： 恰恰相反，更需要了。更新快解决的是"多久能全量用"，没解决"用户手里的版本"。只要还有一个人用着去年的 Safari，你的基础功能就不能押宝在新特性上。FDEUp 那句话要倒背如流：支持新特性是好事，依赖新特性是坏事。Josh 清单里每个特性都标注了"Chrome 155 / Edge 154 有，Firefox 157 / Safari 27 没有"，这种诚实本身就是一种工程素养。Interop 干的是把"一年"变成现实，渐进增强干的是让"这一年"里页面不崩。两手都要硬。
小听： 最后聊聊 Josh 的结尾，有点出人意料：他说在 AI agent 时代，钻研这种底层技术比以往更重要。因为 LLM 的训练数据都是几年前的，指望它们主动用上 2027 的新 CSS 是做梦——想让 agent 写出好页面，人得先懂，懂了才能指导。
陆则明： 这是我全篇最认同的一段，而且 HN 评论区居然没怎么反驳。大家默认的剧本是"AI 会写代码了，人就不用学新特性了"，Josh 把它反过来了：正因为训练数据陈旧，agent 只会吐 2021 年的写法——jQuery 式的思维、浮动布局时代的 hack。你想让它用 corner-shape、anchor positioning，得你先会，然后在 prompt 里指明方向。深技术功底在 agent 时代不是贬值，是变成了"指挥权"。不懂的人连 agent 写得好不好都看不出来，这才是最贵的代价。
小听： 总结一下这份清单的气质？
陆则明： 三句话。第一，CSS 正在从"描述外观"变成"描述行为"：函数、状态查询、滚动触发，越来越像一门编程语言——评论区那句"被困在过时样式表语法身体里的编程语言"，正在破茧。第二，Interop 证明了一件事：标准竞争的终局不一定是赢家通吃，投票+联手修坑这种机制，真能让 12% 变成 91%。第三，对一线前端最实在的建议：去那个投票站投你想要的特性，然后用 @supports 把新玩具包起来——今天做渐进增强，明年全量收割。浏览器的未来，是投票投出来的。