The Future of CSS
本文为原文前 6,000 字符的节选翻译，完整内容请查看原文。
The Future of CSS
For the past few years, all of the major browser vendors (Google, Apple, Microsoft, and Mozilla, along with Igalia and Bocoup) have been working together on Interop, a project to improve universal browser support on web technologies. It’s been a remarkably successful effort; when a focus area gets added to Interop, it often winds up reaching near-100% support across all major browsers within a year. ✨
在过去的几年里，所有主要的浏览器厂商（Google、Apple、Microsoft 和 Mozilla，以及 Igalia 和 Bocoup）一直在合作开展 Interop 项目，旨在改善对 Web 技术的通用浏览器支持。这是一项非常成功的举措；当一个重点领域被加入 Interop 后，它通常会在一年内就在所有主流浏览器中实现近乎 100% 的支持。✨
CSS Subgrid is a good example. Subgrid is a super-powerful extension to CSS Grid which enables entirely new layouts. It was implemented in Firefox back in 2019, but there wasn’t much movement with other browsers for years. It got added to Interop 2023, and by the end of that year, it was widely available across all modern browsers.
CSS Subgrid 就是一个很好的例子。Subgrid 是 CSS Grid 的一个超强扩展，它实现了全新的布局方式。它早在 2019 年就在 Firefox 中实现了，但多年来在其他浏览器中进展缓慢。它在 2023 年被加入 Interop，到那年年底，它已在所有现代浏览器中得到广泛支持。
As we reach the end of 2026, Interop 2027 is currently being planned, and the team at Mozilla has created a ranking system for us to upvote our most-requested features. They plan on using the ranking data to decide what to include for next year’s Interop!
随着 2026 年接近尾声，Interop 2027 目前正在规划中，Mozilla 团队创建了一个排名系统，供我们投票选出最需要的功能。他们计划利用这些排名数据来决定明年 Interop 的包含内容！
In this blog post, I want to dig into the top 10 features I voted for, to offer a bit of a preview of what CSS might look like within the next year. There will also be some little tips and tricks you can start using today!
在这篇博文中，我想深入探讨我投票选出的前 10 大功能，为大家预览一下明年 CSS 的样子。文中还会包含一些你现在就可以开始使用的小技巧！
One of the most exciting ideas is the proposal to add functions to CSS:
最令人兴奋的想法之一是向 CSS 添加函数的提案：
If you’re familiar with JavaScript, this should feel pretty familiar. We define new functions with @function and specify the returned value with result.
如果你熟悉 JavaScript，这应该会让你感到非常亲切。我们使用 @function 定义新函数，并使用 result 指定返回值。
There’s so much cool stuff we can do with this. Personally, the use case I’m most interested in is the ability to convert between polar and cartesian coordinates, a concept we use over and over in my Whimsical Animations course:
我们可以利用它做很多很酷的事情。就我个人而言，我最感兴趣的用例是在极坐标和笛卡尔坐标之间进行转换的能力，这是我在《异想天开的动画》课程中反复使用的一个概念：
This feels pretty “science-fiction” to me, but it’s already implemented in Chromium browsers, and if it gets added to Interop 2027, I think there’s very good odds that it could become widely available sooner rather than later!
这对我来说感觉很“科幻”，但它已经在 Chromium 浏览器中实现了。如果它被加入 Interop 2027，我认为它很有可能很快就会得到广泛应用！
In CSS, we can use the border-radius property to round off the edges of our DOM nodes to create rounded rectangles. This property effectively adds a quarter-circle to each corner, connecting the 4 straight sides.
在 CSS 中，我们可以使用 border-radius 属性来圆化 DOM 节点的边缘，从而创建圆角矩形。该属性实际上是在每个角添加了一个四分之一圆，连接起 4 条直线边。
The corner-shape property is an exploration of alternative ways to connect the 4 sides of our DOM nodes. It provides a handful of new options:
corner-shape 属性是对连接 DOM 节点 4 条边的替代方式的探索。它提供了一些新的选项：
When I first heard about this property, I was most excited about squircle. If you’re not familiar, squircles are an alternative algorithm for generating rounded corners using superellipses. Apple has been making use of them for years because they produce smoother, gentler edges.
当我第一次听说这个属性时，我最兴奋的是 squircle（超椭圆圆角）。如果你不熟悉，squircle 是一种使用超椭圆生成圆角的替代算法。Apple 多年来一直在使用它们，因为它们能产生更平滑、更柔和的边缘。
That said, after messing around with corner-shape for a while, I find myself using corner-shape: bevel a ton. It’s great for creating video game / sci-fi UIs. Here’s a little preview of a side-project I’ve been working on, with tons of corner-shape: bevel:
话虽如此，在摆弄了一段时间 corner-shape 后，我发现自己非常频繁地使用 corner-shape: bevel（斜角）。它非常适合创建电子游戏或科幻风格的 UI。这是我正在进行的一个副项目的预览，其中大量使用了 corner-shape: bevel：
We’ve technically been able to do stuff like this with clip-path or masks, but unlike those features, corner-shape actually changes the shape of the border-box. This means that our borders, outlines, and box-shadows will correctly follow the altered corner shapes!
从技术上讲，我们以前可以通过 clip-path 或 mask 实现类似的效果，但与这些功能不同的是，corner-shape 实际上改变了边框盒（border-box）的形状。这意味着我们的边框、轮廓和阴影将正确地跟随改变后的圆角形状！
And even though this property isn’t available in Firefox/Safari (as I write this in October 2026), I think it’s reasonable to start using it today. It’s a perfect progressive enhancement!
尽管（截至我 2026 年 10 月撰写本文时）该属性在 Firefox/Safari 中尚不可用，但我认为现在开始使用它是合理的。这是一个完美的渐进增强方案！
In addition to corner-shape, there’s a separate proposal for border-shape, which is essentially a lower-level version that allows us to draw the border ourselves.
除了 corner-shape，还有一个关于 border-shape 的独立提案，它本质上是一个更底层的版本，允许我们自己绘制边框。
I covered this property in depth in a recent newsletter issue, so I won’t repeat myself too much here. To summarize, border-shape lets us create whatever border shape we want using straight lines, arcs, and Bézier curves.
我在最近的一期时事通讯中深入探讨了这个属性，所以在这里我就不再赘述了。简而言之，border-shape 允许我们使用直线、圆弧和贝塞尔曲线创建我们想要的任何边框形状。
I used this property recently to draw this card with a big circular scoop at the top:
我最近使用这个属性绘制了一张顶部带有大圆形凹槽的卡片：
Like corner-shape, this property changes the element’s actual border box, so borders/outlines/shadows will trace it correctly. I drew the shape I wanted and then added a white border and black outline to achieve the effect shown above!
与 corner-shape 一样，该属性会改变元素的实际边框盒，因此边框、轮廓和阴影会正确地沿其描边。我绘制了想要的形状，然后添加了白色边框和黑色轮廓，从而实现了上述效果！
We can even animate between different border shapes, like I do in this clip:
我们甚至可以在不同的边框形状之间进行动画处理，就像我在这个片段中所做的那样：
You can learn a bit more about this property in my newsletter issue on the subject.
你可以在我关于该主题的时事通讯中了解更多关于此属性的信息。
I recently published a blog post on Anchor Positioning, one of the most exciting modern CSS features (which was actually prioritized in Interop 2026, and is now widely available!).
我最近发表了一篇关于锚点定位（Anchor Positioning）的博文，这是最令人兴奋的现代 CSS 功能之一（它实际上在 Interop 2026 中被优先考虑，现在已广泛可用！）。
The Anchor Positioning API allows us to anchor one element to another. For example, we might anchor a floating tooltip element to its trigger, so that no matter where that trigger is on the page, the tooltip will always be connected to it.
锚点定位 API 允许我们将一个元素锚定到另一个元素上。例如，我们可以将浮动工具提示元素锚定到其触发器上，这样无论触发器在页面上的什么位置，工具提示都将始终与其连接。
If you’ve ever tried to solve this sort of problem yourself, you know it’s surprisingly tricky. For example, we might want our tooltip to float above the anchor, but what if the anchor is near the top of the viewport?
如果你曾经尝试过自己解决这类问题，你就会知道这出奇地棘手。例如，我们可能希望工具提示浮动在锚点上方，但如果锚点靠近视口顶部怎么办？
The tooltip fits comfortably.
工具提示可以舒适地放置。
The tooltip’s getting cut off!
工具提示被截断了！
The original Anchor Positioning API gave us most of the tools needed to solve this problem easily in CSS. It allows us to specify fallback positions; if the target element doesn’t fit above the anchor, it can flip automatically to the bottom.
最初的锚点定位 API 为我们提供了在 CSS 中轻松解决此问题所需的大部分工具。它允许我们指定回退位置；如果目标元素无法放置在锚点上方，它可以自动翻转到底部。
The only thing missing was the ability to tell whether or not the target had flipped. We had no way to know, in CSS, whether the target element is currently sitting above or below the anchor, whether it’s using the default or fallback position. For tooltips, this is a problem because we typically want to add a little protrusion that points towards the anchor.
唯一缺少的是判断目标是否已经翻转的能力。在 CSS 中，我们无法知道目标元素当前是位于锚点上方还是下方，也无法知道它使用的是默认位置还是回退位置。对于工具提示来说，这是一个问题，因为我们通常希望添加一个指向锚点的小突起。
The “Level 2” version of the Anchor Positioning API includes a new type of container query that allows us to check whether the target element is using a fallback position or not. You can learn more about it in my Anchor Positioning blog post, or check out the Interop 2027 proposal.
锚点定位 API 的“Level 2”版本包含一种新型容器查询，允许我们检查目标元素是否正在使用回退位置。你可以在我的锚点定位博文中了解更多信息，或者查看 Interop 2027 提案。
So honestly, I had never heard of this proposal, and as far as I can tell, it isn’t implemented in any browsers. It’s not even listed on caniuse.
老实说，我以前从未听说过这个提案，据我所知，它在任何浏览器中都没有实现。它甚至没有在 caniuse 上列出。