Glonce

Interop 2027: ten CSS features a developer wants browsers to prioritise

miscThe Glonce editorsHacker News🔥64Glonce rating64Impact42Novelty50Relevance65Surprise35Players25Credibility80
Interop 2027: ten CSS features a developer wants browsers to prioritise

Interop is a project in which Google, Apple, Microsoft and Mozilla, along with Igalia and Bocoup, work together to improve universal browser support for web technologies. The post's author calls it remarkably successful: when a focus area is added, it often reaches near-100% support across all major browsers within a year. The example given is CSS Subgrid, an extension to CSS Grid that enables new layouts. Firefox implemented it in 2019, and other browsers barely moved for years. After it was added to Interop 2023, it was widely available across all modern browsers by the end of that year.

Interop 2027 is now being planned. The team at Mozilla has built a ranking system where developers can upvote the features they most want, and according to the author, Mozilla plans to use that data to decide what goes into next year's Interop. The post walks through the top 10 features the author voted for, as a preview of what CSS might look like within the next year, with tips for using some of them today. The text available here covers the first eight in full and breaks off at the ninth.

  1. CSS functions. The proposal adds @function to CSS: you define a function with parameters (for example --gradient-to-transparent(--color, --direction: bottom)), return a value with result, and call it like a built-in. The author's favourite use is converting polar to cartesian coordinates, for example a --translate-polar(--angle, --distance) function built on cos() and sin() that moves a particle 100px at a 45 degree angle. It is already implemented in Chromium browsers, and the author thinks that, if it joins Interop 2027, there are very good odds it becomes widely available sooner rather than later.

  2. corner-shape. Where border-radius adds a quarter-circle to each corner, corner-shape offers other ways to connect the four sides, including squircle (a smoother corner based on superellipses, which Apple has used for years) and bevel. The author uses bevel constantly for video-game and sci-fi interfaces. Unlike clip-path or masks, corner-shape changes the shape of the border box, so borders, outlines and box-shadows follow the new corners. It is not available in Firefox or Safari as of October 2026, but the author considers it reasonable to use now as a progressive enhancement.

  3. border-shape. A separate, lower-level proposal that lets developers draw the border themselves from straight lines, arcs and Bézier curves. Like corner-shape, it changes the actual border box. The author used it for a card with a large circular scoop at the top and shows animation between different border shapes.

  4. Anchored container queries. Anchor Positioning, which was prioritised in Interop 2026 and is now widely available, lets one element be anchored to another, such as a tooltip to its trigger. The original API supports fallback positions, so a tooltip that does not fit above its anchor can flip below. What was missing was a way in CSS to tell whether the element had flipped, which matters for the small pointer that points back at the anchor. The Level 2 API adds a container query that checks whether the target is using a fallback position.

  5. The inherit() function. The author had not heard of it before and, as far as they can tell, no browser implements it; it is not even on caniuse. The existing inherit keyword passes a parent's value down, but nested border radii need the inner value reduced. The proposed function takes the inherited value and lets you adjust it with calc(), as in border-radius: calc(inherit() - 4px). Given how preliminary it is, the author would be a bit surprised if it made Interop 2027, but hopes it arrives eventually.

  6. Scroll-triggered animations. Scroll-driven animations, which scrub a keyframe animation as you scroll, were part of Interop 2026 and are implemented in all browsers. Scroll-triggered animations are a separate proposal: a keyframe animation starts when the user scrolls to a certain point, then runs normally over a set duration. Today this takes the IntersectionObserver API in JavaScript, which the author calls a bit of a pain. The author points to an article by Bramus for more.

  7. reading-flow and reading-order. Tab order follows DOM order, not visual order, so when a grid layout is rearranged between desktop and mobile, keyboard and assistive-technology navigation stays the same and will be wrong for some users. The reading-flow property lets tab order follow a visual order (for example reading-flow: grid-rows on a grid), with values for both Grid and Flexbox. For finer control, reading-order sets a custom order, a little like tabIndex in HTML. The author says the property was championed by Rachel Andrew, one of their personal heroes. An Interop 2027 proposal exists.

  8. interpolate-size and calc-size(). Animating to and from keyword values like auto has long been impossible. interpolate-size: allow-keywords makes it possible, most commonly for animating a collapsible accordion from height 0 to height auto. The author's demo also needs other niche but well-supported CSS such as transition-behavior. There is an Interop 2027 proposal covering it alongside calc-size(). It has been implemented in Chrome since 2024. It can be used now as progressive enhancement, but the transition should be gated behind a @supports query, or unsupported browsers get a brief delay.

The ninth item, CSS gap decorations, begins where the available text ends.

Key facts

  • Interop is a joint effort by Google, Apple, Microsoft and Mozilla, with Igalia and Bocoup; Mozilla has built a ranking system that it plans to use to choose what goes into Interop 2027.
  • The author's top 10 vote includes CSS functions (@function, already in Chromium), corner-shape, border-shape, anchored container queries, inherit(), scroll-triggered animations, reading-flow/reading-order and interpolate-size/calc-size().
  • Subgrid is the author's proof of the process: Firefox-only since 2019, added to Interop 2023, widely available in all modern browsers by the end of that year.
  • Usable today as progressive enhancement: corner-shape (missing in Firefox and Safari as of October 2026) and interpolate-size (in Chrome since 2024, gated behind @supports).
  • The inherit() function is not implemented in any browser as far as the author can tell, and the author would be a bit surprised if it made Interop 2027.

Why it matters

Interop decides which web features get pushed to matching support in every major browser, and the author says a feature that joins often reaches near-100% support within a year. Subgrid went from Firefox-only in 2019 to everywhere by the end of 2023 after joining Interop 2023. Which proposals Mozilla ranks highly could therefore shape what front-end developers can rely on soon. The post is a practical preview of that list: functions in CSS, new border and corner geometry, smarter anchored positioning, keyboard order that follows the layout, and animation to auto sizes.

Who it affects

Front-end developers and designers who write CSS, and in particular those who build animations, tooltips, accordions or custom-shaped interfaces. The reading-flow and reading-order items bear on keyboard and assistive-technology users, since tab order currently follows DOM order rather than the visual layout. Browser vendors are the other audience: Mozilla says it plans to use the ranking data when deciding what to include.

How to use it

Mozilla's ranking system is open to developers who want to upvote features for Interop 2027. For code, the author suggests two features to adopt now as progressive enhancement. corner-shape works in Chromium but not yet in Firefox or Safari as of October 2026, so the shape simply falls back where unsupported. interpolate-size: allow-keywords, in Chrome since 2024, enables height 0 to auto transitions; put the transition behind a @supports query, otherwise unsupported browsers get a brief delay. @function is already implemented in Chromium browsers. Anchor Positioning and scroll-driven animations are already widely available.

How solid is it

This is one developer's opinion piece and preview, written in October 2026, not an official Interop list. The author states the facts they rely on (Subgrid's timeline, which features ship where) but the forecasts are their own guesses: they think CSS functions have very good odds if included, and expect inherit() probably will not make the cut. Interop 2027 is still being planned and Mozilla only says it plans to use the ranking data. The available text breaks off at item 9, CSS gap decorations, so item 10 and the closing remarks are not covered here.

Risks and caveats

Nothing here is a commitment that any listed feature will be in Interop 2027. inherit() is described as very preliminary and not implemented in any browser. corner-shape is missing in Firefox and Safari today, and interpolate-size is not available in all browsers, so both need fallbacks. Without the @supports gate on interpolate-size, unsupported browsers get a brief added delay. The 'near-100% within a year' figure is the author's general observation about Interop, not a guarantee for any single feature.

“when a focus area gets added to Interop, it often winds up reaching near-100% support across all major browsers within a year.”

— The post's author