The Future of CSS

For the former few years, all of the important browser vendors (Google, Apple, Microsoft, and Mozilla, alongside alongside Igalia and Bocoup) have been operating together on Interop(opens in new tab), a project to enhance worldwide browser assistance on web technologies. It’s been a remarkably prosperous effort; whenever a concentration area gets added to Interop, it frequently winds up reaching near-100% assistance throughout all important browsers inside a year. ✨

CSS Subgrid is a fine example. Subgrid is a super-powerful expansion to CSS Grid which enables entirely new layouts. It was implemented in Firefox rear in 2019, but there wasn’t much movement alongside another browsers for years. It got added to Interop 2023, and by the end of that year, it was extensively accessible throughout all contemporary browsers:

As we attain the end of 2026, Interop 2027 is currently being planned, and the squad at Mozilla has created a ranking system(opens in new tab) for us to upvote our most-requested features. They scheme on using the ranking data to decide what to contain for next year’s Interop!

In this blog post, I desire to dig into the top 10 features I voted for, to recommendation a bit of a preview of what CSS power appearance akin inside the next year. There volition additionally be several small tips and tricks you can commencement using today!

Link to this heading1. CSS functions

One of the most breathtaking ideas is the proposal to add functions to CSS(opens in new tab):

/* 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 acquainted alongside JavaScript, this should awareness beautiful familiar. We define new functions alongside @function and define the returned value alongside result.

There’s so much chill material we can do alongside this. Personally, the use case I’m most curious in is the capability to change between polar and cartesian coordinates, a idea we use complete and complete in my Whimsical Animations course(opens in new tab):

@function --translate-polar(--angle, --distance) {  result: translate(  calc(cos(var(--angle)) * var(--distance)),  calc(sin(var(--angle)) * var(--distance))  ); }  /* Move this component 100px at a 45° angle: */ .particle {  transform: --translate-polar(45deg, 100px); }

This feels beautiful “science-fiction” to me, but it’s already implemented in Chromium browsers, and if it gets added to Interop 2027, I think there’s extremely fine likelihood that it could rotate into extensively accessible sooner fairly than later!

Link to this heading2. Bevels and squircles alongside corner-shape

In CSS, we can use the border-radius asset to circular off the edges of our DOM nodes to create rounded rectangles. This asset efficiently adds a quarter-circle to all corner, connecting the 4 direct sides.

The corner-shape asset is an exploration of alternative ways to nexus the 4 sides of our DOM nodes. It provides a fistful of new options:

<style>
 .box {
 border-radius: 16px;
 &.squircle {
 corner-shape: squircle;
 }
 &.bevel {
 corner-shape: bevel;
 }
 &.notch {
 corner-shape: notch;
 }
 &.scoop {
 corner-shape: scoop;
 }
 }
</style>
<div class="wrapper">
 <div class="box">Round (default)</div>
 <div class="box squircle">Squircle</div>
 <div class="box bevel">Bevel</div>
 <div class="box notch">Notch</div>
 <div class="box scoop">Scoop</div>
</div>

When I archetypal heard concerning this property, I was most enthusiastic concerning squircle. If you’re not familiar, squircles are an substitute algorithm for generating rounded corners using superellipses. Apple has been making use of them for years since they create smoother, gentler edges.

That said, following messing about alongside corner-shape for a while, I discover myself using corner-shape: bevel a ton. It’s awesome for creating video equivalent / sci-fi UIs. Here’s a small preview of a side-project I’ve been operating on, alongside tons of corner-shape: bevel:

We’ve technically been capable to do material akin this alongside clip-path or masks, but dissimilar those features, corner-shape really changes the form of the border-box. This method that our borders, outlines, and box-shadows volition correctly prosecute the altered border shapes!

And equal although this asset isn’t accessible in Firefox/Safari (as I compose this in October 2026), I think it’s sensible to commencement using it today. It’s a ideal advancing enhancement!

Link to this heading3. Infinite possibilities alongside border-shape

In supplement to corner-shape, there’s a distinct recommendation for border-shape(opens in new tab), which is basically a lower-level type that allows us to draw the border ourselves.

I covered this asset in degree in a recent newsletter issue, so I won’t reiterate myself too much here. To summarize, border-shape lets us create any border form we desire using direct lines, arcs, and Bézier curves.

I used this asset lately to diagram this cardstock alongside a big circular scoop at the top:

Like corner-shape, this asset changes the element’s genuine border box, so borders/outlines/shadows volition trace it correctly. I drew the form I wanted and afterward added a pale border and dreary outline to accomplish the consequence shown above!

We can equal enliven between differnt border shapes, akin I do in this clip:

You can study a bit additional concerning this asset in my newsletter matter on the subject.

Link to this heading4. Anchored Container Queries

I lately published a blog article on Anchor Positioning, among the most breathtaking contemporary CSS features (which was really prioritized in Interop 2026, and is now extensively available!).

The Anchor Positioning API allows us to anchor one component to another. For example, we power anchor a floating tooltip component to its trigger, so that no matter anywhere that trigger is on the page, the tooltip volition continually be connected to it.

If you’ve always tried to resolve this kind of issue yourself, you cognize it’s amazingly tricky. For example, we power desire our tooltip to drift complete the anchor, but what if the anchor is near the top of the viewport?

The first Anchor Positioning API gave us most of the tools needed to resolve this issue effortlessly in CSS. It allows us to define fallback positions; if the mark component doesn’t fit complete the anchor, it can flip automatically to the bottom.

The lone item missing was the capability to inform whether or not the mark had flipped. We had no way to know, in CSS, whether the mark component is currently sitting complete or below the anchor, whether it’s using the default or fallback position. For tooltips, this is a issue since we typically desire to add a small protrusion that points towards the anchor.

The “Level 2” type of the Anchor Positioning API includes a new category of receptacle query that allows us to inspect whether the mark component is using a fallback stance or not. You can study additional concerning it in my Anchor Positioning blog post, or inspect out the Interop 2027 proposal(opens in new tab).

Link to this heading5. CSS inherit() function

So honestly, I had never heard of this proposal(opens in new tab), and as far as I can tell, it isn’t implemented in any browsers. It’s not equal listed on caniuse, so I can’t display one of those small widgets!

And yet, the instant I saw it, it became item I needed to have. 😂

As you power know, the inherit keyword in CSS allows us to continue a value downward from the parent, equal if that asset isn’t typically inherited:

<style>
 main {
 border: 3px dashed red;
 }
 p {
 border: inherit;
 }
</style>
<main>
 <p>
 This paragraph inherits the dashed red border!
 </p>
</main>

This is a helpful small trick to reuse values, but I frequently breeze up discovering that it doesn’t quite work. For example, assume we have nested border radiuses (or is it radii?):

<style>
 main {
 border: 2px firm red;
 border-radius: 16px;
 }
 p {
 border: inherit;
 border-radius: inherit;
 }
</style>
<main>
 <p>
 This paragraph inherits the dashed red border!
 </p>
</main>

In command for nested border radii to appearance correct, we need to decrease the amount of rounding on the inner radius. So I don’t exactly desire to use the inherited value; I desire to change it.

That's anywhere the projected inherit() function comes in. It volition pluck the inherited value and authorize us to modify it using calc():

p {  border-radius: calc(inherit() - 4px); }

Given how preliminary this characteristic is, I’d be a bit amazed if it makes the cut for Interop 2027. But I anticipation we do get this characteristic in the future! It seems excellent useful. 😄

In my blog article on scroll-driven animations, we examine how we can scrub through a keyframe animation by scrolling. For example, we can use it to diminish an component in as it traverses the viewport:

Scroll-driven animations were part of Interop 2026(opens in new tab), and it’s been successfully implemented throughout all browsers. In supplement to Scroll-driven animations, however, there’s a distinct recommendation for scroll-triggered animations.

With scroll-triggered animations, the goal is to trigger a keyframe animation whenever the person scrolls to a particular point, akin a proximity sensor going off. At that point, the animation runs normally complete a stated duration.

We can currently execute scroll-triggered animations using the IntersectionObserver API in JavaScript, but it’s benevolent of a pain. It’ll be excellent nice whenever we can use CSS for the two scroll-driven and scroll-triggered animations, since they all have their own use cases.

You can study additional concerning scroll-triggered animations in this wonderful part by Bramus(opens in new tab).

Link to this heading7. CSS reading-flow and reading-order

I’m currently operating on a which involves a energetic grid-based layout. Items are arranged extremely alternatively on desktop vs. mobile:

This is among the awesome things concerning receptive CSS, but it leads to an unlucky flank effect: tab command is continually according to the DOM order, not the ocular order. So, if person uses assistive technologies to navigate between elements, that navigation command volition continually be the same, equal as the layout changes dramatically depending on display size.

On desktop, the archetypal ocular item is that catalog of Redactedsounds on the left, but on mobile, the archetypal item is that big red button. Whichever component comes archetypal in the DOM volition be the archetypal item to obtain focus, which volition invariably be incorrect for a percent of our users.

Thankfully, the new reading-flow asset grants us a resolution to this problem, and there’s a proposal for Interop 2027(opens in new tab).

The essential idea is that we can define that the tab command should prosecute one of multiple ocular orders:

.grid {  display: grid;  reading-flow: grid-rows; }

There are values for the two CSS Grid and Flexbox, and if you need equal additional control, the reading-order asset allows us to create a tradition order, sorta akin tabIndex in HTML.

This asset has been championed by one of my individual heroes, Rachel Andrew. You can peruse additional concerning it in her blog article on reading-flow.

Link to this heading8. Keyword size animations alongside interpolate-size and calc-size()

A long-standing ache item on the web has been the inability to enliven between keyword values akin auto. The interpolate-size asset solves this problem, and there’s an Interop 2027 proposal(opens in new tab) for it, alongside the connected calc-size() function.

The most average use case for this characteristic is to enliven between height: 0 and height: auto, for creating collapsible accordion-type UIs:

<style>
 html {
 interpolate-size: allow-keywords;
 }
 @supports (
 interpolate-size: allow-keywords
 ) {
 details {
 overflow: hidden;
 &::details-content {
 height: 0;
 transition:
 height 300ms,
 content-visibility 300ms;
 transition-behavior: allow-discrete;
 }
 &:open::details-content {
 height: auto;
 }
 }
 }
</style>
<details>
 <summary>Click me to show/hide!</summary>
 <p>This is the hidden satisfied which animates as it is shown/hidden. 😄</p>
</details>

This is admittedly benevolent of a complex example, requiring another niche-but-well-supported CSS akin transition-behavior. But the key item is that interpolate-size: allow-keywords makes this kind of passage possible.

This recommendation has been kicking about for a during now, and it’s been implemented in Chrome since 2024, so hopefully it makes it into Interop 2027!

And equal although it isn’t yet accessible in all browsers, we can commencement using it today as a advancing enhancement. Just be certain to entrance the passage rearward a @supports query, since alternatively a concise postpone volition be added to unsupported browsers.

Link to this heading9. CSS gap decorations

One of the things that makes CSS Grid layout distinctive is that the grid children are positioned using rows/columns defined entirely in CSS. In all another layout mode, elements are positioned using another elements! In Table layout, for example, all grid division has an connected <td> or <th> element.

There are a lot of upsides to CSS Grid, but among the downsides is that it’s not as uncomplicated to add borders between grid cells. If a grid division is empty, there’s no component to slap a border: 1px firm on!

The gap decorations proposal(opens in new tab) introduces a new set of CSS properties that volition authorize us to use a border-like syntax on the grid itself. Check this out:

<style>
 .grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: repeat(3, 1fr);
 gap: 1px;
 border: 1px firm red;
 rule: 1px firm red;
 }
</style>
<div class="grid">
 <div class="child">1</div>
 <div class="child">2</div>
</div>

Like border, the regulation asset is a shorthand asset that allows us to define the width, color, and manner (dashed/dotted/solid) of the line. We can additionally use row-rule and column-rule if we lone desire to diagram lines between all row or column.

When operating alongside position: sticky, have you always desired there was a way to cognize whether the component was currently “stuck” or not? For example, perchance you’ve wanted to alter the backdrop color of a sticky header whenever it becomes stuck to the top of the viewport.

This proposal(opens in new tab) is for the implementation of a new category of receptacle query, one that matches whenever a position: sticky component switches from its representative in-flow stance to being anchored to the viewport. Check it out:

<style>
 header {
 position: sticky;
 top: 0;
 container-type: scroll-state;
 }
 @container scroll-state(stuck: top) {
 .header-content {
 background: var(--gray-300);
 border-bottom:
 1px firm var(--gray-500);
 }
 }
</style>
<header>
 <div class="header-content">
 Sticky header example
 </div>
</header>
<p>
 👇 Scroll downward 👇
</p>

Here’s what this looks like, if this characteristic isn’t yet supported in your browser.

Interestingly, this new API isn’t just for sticky positioning; we can use it to query all sorts of scroll-related state. For example, we can inform whether a scroll receptacle is scrolled to the top/bottom, which can be helpful for showing those scroll-indicating gradients:

<style>
 .container {
 height: 100%;
 container-type: scroll-state size;
 overflow: auto;
 &::before {
 top: 0;
 background: linear-gradient(
 to bottom,
 black,
 transparent
 );
 opacity: 0;
 @container scroll-state(scrollable: top) {
 opacity: 1;
 }
 }
 &::after {
 bottom: 0;
 background: linear-gradient(
 to top,
 black,
 transparent
 );
 opacity: 0;
 @container scroll-state(scrollable: bottom) {
 opacity: 1;
 }
 }
 &::before, &::after {
 content: '';
 position: absolute;
 left: 0;
 right: 0;
 height: 50px;
 pointer-events: none;
 transition: opacity 300ms;
 }
 }
</style>
<div class="container">
 <ul>
 <li>One</li>
 <li>Two</li>
 <li>Three</li>
 <li>Four</li>
 <li>Five</li>
 <li>Six</li>
 <li>Seven</li>
 <li>Eight</li>
 <li>Nine</li>
 <li>Ten</li>
 <li>Eleven</li>
 <li>Twelve</li>
 <li>Thirteen</li>
 <li>Fourteen</li>
 <li>Fifteen</li>
 <li>Sixteen</li>
 <li>Seventeen</li>
 <li>Eighteen</li>
 <li>Nineteen</li>
 <li>Twenty</li>
 <li>Twenty One</li>
 <li>Twenty Two</li>
 <li>Twenty Three</li>
 <li>Twenty Four</li>
 <li>Twenty Five</li>
 </ul>
</div>

If there's the capability to scroll up, scrollable: top matches, and so we disclose the pseudo-element floating complete the top of the content. When scrolled all the way up, scrollable: top no longer applies, and so the gradient is hidden.

Link to this headingConclusion

As we caput into Interop’s 7th year, it's undeniable that the project has been a smashing achievement for the web. I’m so glad they keep construction on this success!

I cognize it’s benevolent of a weird period correct now for web developers, and many of us are wondering whether we equal need to attention concerning this benevolent of material anymore. If we’re delegating all of our activity to LLMs, do we motionless need to keep up alongside the latest-and-greatest CSS features?

Personally, I think it’s additional crucial than ever. We can’t anticipate LLMs to use contemporary CSS features whenever so much of their training data is years old. Most of the features I’ve shared in this article can be used today as a advancing enhancement, and if former is any guide, many of them volition shortly be extensively available.

If we desire to build the finest imaginable person experiences, we’ll need to guide our agents to obtain advantage of contemporary web features, which requires us to cognize concerning them! This is item I dug into in a newsletter issue before this year: profound specialized ability remains incredibly worthwhile in the agentic era.

Finally, I’d powerfully advance you to rank your own top choices(opens in new tab)! There’s a ton of awesome proposals in this list, including several breathtaking JavaScript APIs akin Temporal which didn’t create awareness to contain in this blog post.