Interop 2027: the CSS features you can start using today

Interop 2027 is being planned right now, and most of the CSS on the wish list already works in Chrome and Edge. Some of it is safe to ship today, as long as the page still looks fine without it. This post walks through five features from Josh W. Comeau's top-10 picks, says where each one stands, and sorts them into "use now" and "wait".

What Interop is, in one example

Interop is a yearly project in which the major browser vendors (Google, Apple, Microsoft and Mozilla, along with Igalia and Bocoup) agree on focus areas and work on them together. Comeau's example is Subgrid: Firefox shipped it in 2019, the other browsers did little for years, it was added to Interop 2023, and by the end of that year it was available in all modern browsers. For 2027, Mozilla has set up a ranking where developers upvote the features they want, and the team plans to use that ranking to pick the focus areas.

One support line covers everything below that has a caniuse entry. Comeau's widgets, as of October 2026, all read the same: supported in Chrome 155 and Edge 154, not supported in Firefox 157 or Safari 27. So the question is never "does it work everywhere". It is "what happens in the browsers where it doesn't".

Use today: corner-shape

corner-shape changes how border-radius joins two sides. Instead of a quarter circle you can ask for squircle, bevel, notch or scoop. Unlike clip-path, it changes the border box itself, so borders, outlines and shadows follow the new corner. Comeau calls it "a perfect progressive enhancement": Firefox and Safari simply keep the rounded corner.

.card {
  border-radius: 16px;
  corner-shape: bevel;
}

If you tune the radius first, the border radius generator gives you the value, and the bevel goes on top. For shapes that must look the same in every browser today, clip-path is still the tool, with the shadow trade-off it brings.

Use today, behind @supports: interpolate-size

interpolate-size: allow-keywords lets a transition run from height: 0 to height: auto, which is the accordion everyone has faked with JavaScript. Comeau notes it has been in Chrome since 2024. His advice is specific: put the transition inside an @supports query, because otherwise unsupported browsers get a short delay added.

html {
  interpolate-size: allow-keywords;
}

@supports (interpolate-size: allow-keywords) {
  details::details-content {
    height: 0;
    overflow: hidden;
    transition: height 300ms, content-visibility 300ms;
    transition-behavior: allow-discrete;
  }
  details:open::details-content {
    height: auto;
  }
}

Use with care: reading-flow and scroll-state queries

reading-flow fixes a real accessibility problem. Tab order follows the DOM, so a grid that rearranges itself on mobile sends keyboard users through the items in an order that no longer matches the screen. reading-flow: grid-rows makes focus follow the visual rows, and reading-order gives finer control. Ship it, but do not lean on it yet: in Firefox and Safari the tab order is still the DOM order, so the DOM order still has to make sense.

Scroll-state container queries let CSS know when a position: sticky header is stuck, or whether a scroll container can still scroll up or down. The fallback is a header that simply never changes its look, which is usually fine.

header {
  position: sticky;
  top: 0;
  container-type: scroll-state;
}
@container scroll-state(stuck: top) {
  .header-content { border-bottom: 1px solid; }
}

Wait: CSS functions

@function lets you define your own CSS function with parameters and a result, then call it like --gradient-to-transparent(red). It is the most exciting item on the list and the worst one to ship as an enhancement, because a function usually produces a value the design depends on. Where it is not supported, the declaration is dropped and the property falls back to whatever came before. Learn it now, keep it out of production CSS until it lands in more than one engine.

Comeau's list has five more picks, including border-shape, gap decorations with the rule property, scroll-triggered animations and a proposed inherit() function that he says no browser implements yet.

Next step: pick one card or accordion on your own site, add corner-shape or the interpolate-size block, and check it in Firefox or Safari to confirm nothing broke. Then add your votes to the Interop 2027 ranking. Source: Josh W. Comeau, The Future of CSS: My top 10 picks for Interop 2027.