在过去的几年里，所有主要的浏览器厂商（谷歌、苹果、微软和Mozilla，以及Igalia和Bocoup）一直在共同努力推进Interop，这是一个旨在改善网络技术的通用浏览器支持的项目。这是一个相当成功的努力；当一个重点领域被添加到Interop时，它通常会在一年内在所有主要浏览器中实现接近100%的支持。✨ CSS Subgrid就是一个很好的例子。Subgrid是CSS Grid的一个超级强大的扩展，能够实现全新的布局。它在2019年已在Firefox中实施，但其他浏览器多年来并没有太大动作。它在2023年被添加到Interop，到那年年底，已经在所有现代浏览器中广泛可用：Y轴显示每个浏览器中与subgrid相关的测试通过的百分比。黑色“Interop”线显示所有浏览器中的测试通过。在我们接近2026年底时，Interop 2027正在计划中，Mozilla团队创建了一个排名系统，让我们对我们最想要的功能进行投票。他们计划利用排名数据来决定明年Interop中包含的内容！在这篇博客文章中，我想深入探讨我投票的十个功能，以提前预览一下明年CSS可能的样子。还有一些小技巧可以让你今天就开始使用！ 链接到这个标题 1. CSS函数 当前浏览器支持 在Chrome 155和Edge 154中支持 在Firefox 157中不支持 在Safari 27中不支持 最令人兴奋的想法之一是提议在CSS中添加函数：/* 定义一个函数： */@function --gradient-to-transparent(--color, --direction: bottom) { result: linear-gradient(to var(--direction), var(--color), transparent;); }/* 调用它：*/.elem { background: --gradient-to-transparent(red); }/* …产生：*/.elem { background: linear-gradient(to bottom, red, transparent;); }如果你熟悉JavaScript，这应该会让你感到相当熟悉。我们用@function定义新的函数，并用result指定返回值。我们可以用这个做很多很酷的事情。就我个人而言，我最感兴趣的用例是能够在极坐标和笛卡尔坐标之间转换，这个概念在我的Whimsical Animations课程中反复使用：@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. 带角形状的斜角和圆角 当前浏览器支持 在Chrome 155和Edge 154中支持 在Firefox 157中不支持 在Safari 27中不支持 在CSS中，我们可以使用border-radius属性来使我们的DOM节点的边缘圆滑，形成圆角矩形。这个属性实际上是在每个角落添加一个四分之一的圆弧，连接四条直边。corner-shape属性是探索连接我们DOM节点四条边缘的替代方式。它提供了一些新的选项：代码游乐场 代码编辑器：结果 当我第一次听说这个属性时，我对squircle非常兴奋。如果你不熟悉，squircles是一种使用超椭圆产生圆角的替代算法。苹果多年来一直在使用它们，因为它们提供了更平滑、更温和的边缘。也就是说，在玩corner-shape一段时间后，我发现自己非常频繁地使用corner-shape: bevel。它非常适合创建视频游戏/科幻UI。这是我正在进行的一个小项目的预览，使用了大量的corner-shape: bevel：我们技术上可以用clip-path或掩码做这样的事情，但与那些功能不同，corner-shape实际上改变了border-box的形状。这意味着我们的边框、轮廓和盒子阴影将正确跟随改变后的角形！尽管在我写这篇文章的2026年10月时，这个属性在Firefox/Safari中不可用，我认为今天开始使用它是合理的。这是一个完美的渐进增强！ 链接到这个标题 3. 用border-shape实现无限可能 当前浏览器支持 在Chrome 155和Edge 154中支持 在Firefox 157中不支持 在Safari 27中不支持 除了corner-shape之外，还有一个单独的border-shape提案，它本质上是一个允许我们自己绘制边框的低级版本。我在最近的一期通讯中深入介绍了这个属性，所以在这里不会过多重复。总的来说，border-shape让我们创建任何边框形状。