The Future of CSS ✨ My top 10 picks for Interop 2027
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. ✨
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.
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!
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!
1. CSS functions
One of the most exciting ideas is the proposal to add functions to CSS:
/* Define a function: */
@function --gradient-to-transparent(--color, --direction: bottom) {
result: linear-gradient(
to var(--direction),
var(--color),
transparent;
);
}
/* Invoke it: */
.elem {
background: --gradient-to-transparent(red);
}
/* …which produces: */
.elem {
background: linear-gradient(
to bottom,
red,
transparent;
);
}
If you’re familiar with JavaScript, this should feel pretty familiar. We define new functions with @function and specify the returned value with 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:
@function --translate-polar(--angle, --distance) {
result: translate(
calc(cos(var(--angle)) * var(--distance)),
calc(sin(var(--angle)) * var(--distance))
);
}
/* Move this element 100px at a 45° angle: */
.particle {
transform: --translate-polar(45deg, 100px);
}
2. Bevels and squircles with corner-shape
In CSS, we can use the border-radius property to round off the edges of our DOM nodes to create rounded rectangles. 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: squircle, bevel, notch, and scoop.
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.
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. 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!
3. Infinite possibilities with border-shape
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. To summarize, border-shape lets us create whatever border shape we want using straight lines, arcs, and Bézier curves.
Like corner-shape, this property changes the element’s actual border box, so borders/outlines/shadows will trace it correctly.
4. Anchored Container Queries
The Anchor Positioning API allows us to anchor one element to another. 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 check out the Interop 2027 proposal.
5. CSS inherit() function
As you might know, the inherit keyword in CSS allows us to pass a value down from the parent, even if that property isn’t typically inherited. That's where the proposed inherit() function comes in. It will pluck the inherited value and allow us to modify it using calc():
p {
border-radius: calc(inherit() - 4px);
}
6. Scroll-triggered animations
In addition to Scroll-driven animations, there’s a separate proposal for scroll-triggered animations. With scroll-triggered animations, the goal is to trigger a keyframe animation when the user scrolls to a specific point, like a proximity sensor going off. At that point, the animation runs normally over a specified duration.
7. CSS reading-flow and reading-order
Tab order is always based on the DOM order, not the visual order. So, if someone uses assistive technologies to navigate between elements, that navigation order will always be the same, even as the layout changes dramatically depending on screen size. Thankfully, the new reading-flow property grants us a solution to this problem, and there’s a proposal for Interop 2027.
8. Keyword size animations with interpolate-size and calc-size()
A long-standing pain point on the web has been the inability to animate between keyword values like auto. The interpolate-size property solves this problem, and there’s an Interop 2027 proposal for it, alongside the related calc-size() function.
9. CSS gap decorations
The gap decorations proposal introduces a new set of CSS properties that will allow us to use a border-like syntax on the grid itself. The rule property is a shorthand property that allows us to specify the width, color, and style of the line. We can also use row-rule and column-rule if we only want to draw lines between each row or column.
10. Scroll state container queries
This proposal is for the implementation of a new type of container query, one that matches when a position: sticky element switches from its typical in-flow position to being anchored to the viewport. Interestingly, this new API isn’t just for sticky positioning; we can use it to query all sorts of scroll-related state.
Conclusion
As we head into Interop’s 7th year, it's undeniable that the project has been a smashing success for the web. I’d strongly encourage you to rank your own top choices!
