deniz.in

Markets

Weather

Loading weather

· via Hacker News – Front Page (hnrss.org)

CSS functions, corner-shape and anchored queries lead Interop 2027 contenders

Browser vendors are planning Interop 2027 via a public feature-ranking system, and Josh W. Comeau's picks preview the CSS features that could reach every browser next year.

CSS functions, corner-shape and anchored queries lead Interop 2027 contenders

How Interop sets the CSS agenda

An essay by Josh W. Comeau, surfaced on the Hacker News front page, offers a preview of the CSS features most likely to matter a year from now. The occasion is planning for Interop 2027, the latest round of a collaboration in which Google, Apple, Microsoft and Mozilla — joined by Igalia and Bocoup — agree on shared interoperability targets for web technologies.

According to Comeau, the project has a strong record: once a focus area is adopted, it often approaches full support in every major browser within about a year. His example is CSS Subgrid, which Firefox shipped in 2019 but which saw little movement in other engines for years; after joining Interop 2023, it was broadly available across modern browsers by the end of that year.

As 2026 closes, the focus areas for 2027 are being chosen, and Mozilla has built a ranking system that lets developers upvote the features they want most. Comeau says that data will help decide the final lineup, which is why he published the ten proposals he voted for; the first five illustrate where the language is heading.

Custom functions in CSS

The most consequential idea on his list is a proposal to add functions to CSS. Authors would define reusable logic in an @function rule and return a value with a result declaration, mirroring how functions work in JavaScript. Comeau's examples include a reusable gradient generator and a helper that turns polar coordinates into translate transforms — moving an element 100px along a 45-degree angle with a single call. The support data in his post shows it already works in Chrome 155 and Edge 154, but not Firefox 157 or Safari 27. If it makes the Interop 2027 cut, Comeau sees good odds of it becoming widely available quickly.

Rethinking corners and borders

The corner-shape property moves beyond the quarter-circle corners that border-radius produces. Its options include squircles — superellipse-based rounding that Apple has long favored for softer edges — and bevels, which Comeau says he now uses constantly for game- and sci-fi-styled interfaces. The decisive difference from clip-path or masks is that corner-shape changes the element's actual border box, so borders, outlines and box-shadows trace the new silhouette correctly. It ships only in Chromium as of October 2026, but Comeau argues it is a straightforward progressive enhancement and reasonable to adopt today.

A separate border-shape proposal works at a lower level, letting authors draw borders from straight lines, arcs and Bézier curves, with animation between shapes supported. Comeau recently used it to build a card with a large circular scoop cut into its top, then layered a border and outline over the custom geometry.

Anchoring gets a feedback mechanism

Anchor Positioning, an Interop 2026 priority, is now widely available, according to Comeau. It lets a floating element such as a tooltip stay attached to its trigger and flip to a fallback position when space runs short. What CSS could not do was tell whether the fallback had kicked in — information a tooltip needs in order to point its arrow toward the anchor. The Level 2 version of the API adds a container query that exposes exactly that state. It is Chromium-only for now, with the same version split as the other features above.

A wildcard: inherit()

Comeau admits he had never encountered the inherit() proposal before writing the post: no browser implements it, and it does not yet appear on caniuse. It builds on the inherit keyword, which pulls a value from the parent element even for properties that do not normally inherit — a trick for reusing values that he reaches for often. Despite its early stage, he says the proposal immediately became something he wanted.

Why it matters

Interop has become the mechanism that determines which parts of CSS become safe to rely on, and this cycle the selection is partly in developers' hands through Mozilla's ranking. The leading contenders also sketch the language's direction: reusable logic through functions, richer geometry for corners and borders, and state-aware queries that reduce the JavaScript needed for tooltips and motion work. Because several of these features already work in Chromium and degrade harmlessly elsewhere, teams that follow the progressive-enhancement approach Comeau recommends can start experimenting now rather than waiting for the votes to be tallied.

  • #css
  • #interop
  • #web-standards
  • #browsers
  • #front-end

Related posts