The Way forward for CSS ✨ • Josh W. Comeau
For the previous few years, the entire main browser distributors (Google, Apple, Microsoft, and Mozilla, together with Igalia and Bocoup) have been working collectively on Interop(opens in new tab), a mission to enhance common browser assist on net applied sciences. It’s been a remarkably profitable effort; when a spotlight space will get added to Interop, it usually winds up reaching near-100% assist throughout all main browsers inside a yr. ✨
CSS Subgrid is an efficient instance. Subgrid is a super-powerful extension to CSS Grid which permits entirely new layouts. It was applied in Firefox again in 2019, however there wasn’t a lot motion with different browsers for years. It received added to Interop 2023, and by the top of that yr, it was broadly out there throughout all fashionable browsers:
As we attain the top of 2026, Interop 2027 is at present being deliberate, and the crew at Mozilla has created a ranking system(opens in new tab) for us to upvote our most-requested options. They plan on utilizing the rating knowledge to determine what to incorporate for subsequent yr’s Interop!
In this weblog submit, I wish to dig into the highest 10 options I voted for, to supply a little bit of a preview of what CSS would possibly appear like inside the subsequent yr. There will even be some little ideas and tips you can begin utilizing as we speak!
Current Browser Support
Supported in Chrome 155 and Edge 154
Not supported in Firefox 157
Not supported in Safari 27
One of essentially the most thrilling concepts is the proposal to add functions to CSS(opens in new tab):
/* Define a perform: */
@perform --gradient-to-transparent(--color, --direction: backside) {
outcome: linear-gradient(
to var(--direction),
var(--color),
clear;
);
}
/* Invoke it: */
.elem {
background: --gradient-to-transparent(pink);
}
/* …which produces: */
.elem {
background: linear-gradient(
to backside,
pink,
clear;
);
}If you’re aware of JavaScript, this could really feel fairly acquainted. We outline new capabilities with @perform and specify the returned worth with outcome.
There’s so a lot cool stuff we are able to do with this. Personally, the use case I’m most curious about is the power to transform between polar and cartesian coordinates, an idea we use time and again in my Whimsical Animations course(opens in new tab):
@perform --translate-polar(--angle, --distance) {
outcome: translate(
calc(cos(var(--angle)) * var(--distance)),
calc(sin(var(--angle)) * var(--distance))
);
}
/* Move this component 100px at a forty five° angle: */
.particle {
rework: --translate-polar(45deg, 100px);
}This feels fairly “science-fiction” to me, however it’s already applied in Chromium browsers, and if it will get added to Interop 2027, I believe there’s excellent odds that it may grow to be broadly out there sooner slightly than later!
Link to this heading2. Bevels and squircles with corner-shape
Current Browser Support
Supported in Chrome 155 and Edge 154
Not supported in Firefox 157
Not supported in Safari 27
In CSS, we are able to use the border-radius property to spherical off the perimeters of our DOM nodes to create rounded rectangles. This property successfully provides a quarter-circle to every nook, connecting the 4 straight sides.
The corner-shape property is an exploration of other ways to attach the 4 sides of our DOM nodes. It gives a handful of latest choices:
Code Playground
Result
When I first heard about this property, I used to be most enthusiastic about squircle. If you’re not acquainted, squircles are another algorithm for producing rounded corners utilizing superellipses. Apple has been making use of them for years as a result of they produce smoother, gentler edges.
That stated, after messing round with corner-shape for some time, I discover myself utilizing corner-shape: bevel a ton. It’s nice for creating online game / sci-fi UIs. Here’s slightly preview of a side-project I’ve been engaged on, with tons of corner-shape: bevel:
We’ve technically been capable of do stuff like this with clip-path or masks, however not like these options, corner-shape truly adjustments the form of the border-box. This signifies that our borders, outlines, and box-shadows will appropriately comply with the altered nook shapes!
And regardless that this property isn’t out there in Firefox/Safari (as I write this in October 2026), I believe it’s cheap to start out utilizing it as we speak. It’s an ideal progressive enhancement!
Link to this heading3. Infinite prospects with border-shape
Current Browser Support
Supported in Chrome 155 and Edge 154
Not supported in Firefox 157
Not supported in Safari 27
In addition to corner-shape, there’s a separate proposal for border-shape(opens in new tab), which is basically a lower-level model that enables us to draw the border ourselves.
I lined this property in depth in a recent newsletter issue, so I received’t repeat myself an excessive amount of right here. To summarize, border-shape lets us create no matter border form we would like utilizing straight traces, arcs, and Bézier curves.
I used this property lately to attract this card with an enormous round scoop on the prime:
Like corner-shape, this property adjustments the component’s precise border field, so borders/outlines/shadows will hint it appropriately. I drew the form I wished after which added a white border and black define to attain the impact proven above!
We may even animate between differnt border shapes, like I do on this clip:
You can study a bit extra about this property in my newsletter issue on the subject.
Current Browser Support
Supported in Chrome 155 and Edge 154
Not supported in Firefox 157
Not supported in Safari 27
I lately printed a blog post on Anchor Positioning, one of the crucial thrilling fashionable CSS options (which was truly prioritized in Interop 2026, and is now broadly out there!).
The Anchor Positioning API permits us to anchor one component to a different. For instance, we would anchor a floating tooltip component to its set off, in order that regardless of the place that set off is on the web page, the tooltip will at all times be related to it.
If you’ve ever tried to unravel this type of downside your self, you already know it’s surprisingly difficult. For instance, we would need our tooltip to drift above the anchor, however what if the anchor is close to the highest of the viewport?
This is a tooltip displaying extra details about this button.
The tooltip matches comfortably.
This is a tooltip displaying extra details about this button.
The tooltip’s getting minimize off!
The unique Anchor Positioning API gave us most of the instruments wanted to unravel this downside simply in CSS. It permits us to specify fallback positions; if the goal component doesn’t match above the anchor, it might probably flip mechanically to the underside.
The solely factor lacking was the power to inform whether or not or not the goal had flipped. We had no approach to know, in CSS, whether or not the goal component is at present sitting above or under the anchor, whether or not it’s utilizing the default or fallback place. For tooltips, it is a downside as a result of we usually wish to add slightly protrusion that factors in the direction of the anchor.
The “Level 2” model of the Anchor Positioning API features a new kind of container question that enables us to verify whether or not the goal component is utilizing a fallback place or not. You can study extra about it in my Anchor Positioning blog post, or try the Interop 2027 proposal(opens in new tab).
So actually, I had by no means heard of this proposal(opens in new tab), and so far as I can inform, it isn’t applied in any browsers. It’s not even listed on caniuse, so I can’t show a type of little widgets!
And but, the second I noticed it, it grew to become one thing I wanted to have. 😂
As you would possibly know, the inherit key phrase in CSS permits us to cross a worth down from the guardian, even when that property isn’t usually inherited:
Code Playground
Result
This is a helpful little trick to reuse values, however I often wind up discovering that it doesn’t fairly work. For instance, suppose we’ve nested border radiuses (or is it radii?):
Code Playground
Result
In order for nested border radii to look appropriate, we have to scale back the quantity of rounding on the internal radius. So I don’t precisely wish to use the inherited worth; I wish to rework it.
That’s the place the proposed inherit() perform is available in. It will pluck the inherited worth and permit us to switch it utilizing calc():
p {
border-radius: calc(inherit() - 4px);
}Given how preliminary this characteristic is, I’d be a bit stunned if it makes the minimize for Interop 2027. But I hope we do get this characteristic sooner or later! It appears tremendous helpful. 😄
Current Browser Support
Supported in Chrome 155 and Edge 154
Not supported in Firefox 157
Not supported in Safari 27
In my blog post on scroll-driven animations, we discover how we are able to scrub by means of a keyframe animation by scrolling. For instance, we are able to use it to fade a component in because it traverses the viewport:
Scroll-driven animations have been part of Interop 2026(opens in new tab), and it’s been efficiently applied throughout all browsers. In addition to Scroll-pushed animations, nevertheless, there’s a separate proposal for scroll-triggered animations.
With scroll-triggered animations, the aim is to set off a keyframe animation when the person scrolls to a selected level, like a proximity sensor going off. At that time, the animation runs usually over a specified period.
We can at present implement scroll-triggered animations utilizing the IntersectionObserver API in JavaScript, however it’s sort of a ache. It’ll be tremendous good after we can use CSS for each scroll-driven and scroll-triggered animations, since they every have their very own use instances.
You can study extra about scroll-triggered animations on this wonderful article by Bramus(opens in new tab).
Current Browser Support
Supported in Chrome 155 and Edge 154
Not supported in Firefox 157
Not supported in Safari 27
I’m at present engaged on a which entails a dynamic grid-based structure. Items are organized very otherwise on desktop vs. cell:
Desktop Layout
Mobile Layout
This is without doubt one of the nice issues about responsive CSS, however it results in an unlucky aspect impact: tab order is at all times primarily based on the DOM order, not the visible order. So, if somebody makes use of assistive applied sciences to navigate between components, that navigation order will at all times be the identical, even because the structure adjustments dramatically relying on display dimension.
On desktop, the primary visible merchandise is that listing of Redacted on the left, however on cell, the primary merchandise is that huge pink button. Whichever component comes first within the DOM would be the first merchandise to obtain focus, which can invariably be mistaken for a share of our customers.
Thankfully, the brand new reading-flow property grants us an answer to this downside, and there’s a proposal for Interop 2027(opens in new tab).
The fundamental concept is that we are able to specify that the tab order ought to comply with certainly one of a number of visible orders:
.grid {
show: grid;
reading-flow: grid-rows;
}There are values for each CSS Grid and Flexbox, and for those who want much more management, the reading-order property permits us to create a customized order, sorta like tabIndex in HTML.
This property has been championed by certainly one of my private heroes, Rachel Andrew. You can learn extra about it in her blog post on reading-flow.
Link to this heading8. Keyword dimension animations with interpolate-size and calc-size()
Current Browser Support
Supported in Chrome 155 and Edge 154
Not supported in Firefox 157
Not supported in Safari 27
An extended-standing ache level on the net has been the shortcoming to animate between key phrase values like auto. The interpolate-size property solves this downside, and there’s an Interop 2027 proposal(opens in new tab) for it, alongside the associated calc-size() perform.
The most typical use case for this characteristic is to animate between top: 0 and top: auto, for creating collapsible accordion-type UIs:
Code Playground
Result
The interpolate-size property will not be but supported in your browser. Here’s what it seems like in supported browsers:
This is admittedly sort of a fancy instance, requiring different niche-but-well-supported CSS like transition-behavior. But the important thing factor is that interpolate-size: allow-keywords makes this type of transition potential.
This proposal has been kicking round for some time now, and it’s been applied in Chrome since 2024, so hopefully it makes it into Interop 2027!
And regardless that it isn’t but out there in all browsers, we are able to begin utilizing it as we speak as a progressive enhancement. Just make sure to gate the transition behind a @helps question, since in any other case a short delay can be added to unsupported browsers.
Current Browser Support
Supported in Chrome 155 and Edge 154
Not supported in Firefox 157
Not supported in Safari 27
One of the issues that makes CSS Grid structure distinctive is that the grid kids are positioned utilizing rows/columns outlined solely in CSS. In each different structure mode, components are positioned utilizing different components! In Table structure, for instance, each grid cell has an related
component.
There are quite a lot of upsides to CSS Grid, however one of many downsides is that it’s not as straightforward so as to add borders between grid cells. If a grid cell is empty, there’s no component to slap a border: 1px stable on!
The gap decorations proposal(opens in new tab) introduces a brand new set of CSS properties that can enable us to make use of a border-like syntax on the grid itself. Check this out:
Code Playground
Result
The rule property will not be but supported in your browser. Here’s what it seems like in supported browsers:
Like border, the rule property is a shorthand property that enables us to specify the width, shade, and magnificence (dashed/dotted/stable) of the road. We also can use row-rule and column-rule if we solely wish to draw traces between every row or column.
Current Browser Support
Supported in Chrome 155 and Edge 154
Not supported in Firefox 157
Not supported in Safari 27
When working with place: sticky, have you ever ever wished there was a approach to know whether or not the component was at present “caught” or not? For instance, perhaps you’ve wished to alter the background shade of a sticky header when it turns into caught to the highest of the viewport.
This proposal(opens in new tab) is for the implementation of a brand new kind of container question, one which matches when a place: sticky component switches from its typical in-flow place to being anchored to the viewport. Check it out:
Code Playground
Result
Here’s what this seems like, if this characteristic isn’t but supported in your browser.
Interestingly, this new API isn’t simply for sticky positioning; we are able to use it to question all types of scroll-related state. For instance, we are able to inform whether or not a scroll container is scrolled to the highest/backside, which will be helpful for displaying these scroll-indicating gradients:
Code Playground
Result
If there's the power to scroll up, scrollable: prime matches, and so we reveal the pseudo-element floating excessive of the content material. When scrolled all the way in which up, scrollable: prime now not applies, and so the gradient is hidden.
Here’s what this seems like in supported browsers:
As we head into Interop’s seventh yr, it is plain that the mission has been a smashing success for the net. I’m so glad they preserve constructing on this success!
I do know it’s sort of a bizarre time proper now for net builders, and many people are questioning whether or not we even have to care about this type of stuff anymore. If we’re delegating all of our work to LLMs, will we nonetheless have to sustain with the latest-and-greatest CSS options?
Personally, I believe it’s extra vital than ever. We can’t count on LLMs to make use of fashionable CSS options when a lot of their coaching knowledge is years previous. Most of the options I’ve shared on this submit can be utilized as we speak as a progressive enhancement, and if historical past is any information, lots of them will quickly be broadly out there.
If we wish to construct the very best person experiences, we’ll have to information our brokers to make the most of fashionable net options, which requires us to find out about them! This is one thing I dug into in a newsletter issue earlier this yr: deep technical experience stays extremely worthwhile within the agentic period.
Finally, I’d strongly encourage you to rank your own top choices(opens in new tab)! There’s a ton of nice proposals on this listing, together with some thrilling JavaScript APIs like Temporal which didn’t make sense to incorporate on this weblog submit.
Last up to date on
October twentieth, 2026
