My web Interop 2027 rankings

For the second year, the Firefox team is offering the developer community the chance to rank web platform proposals with Interop 2027. Browser vendors including Apple, Google, Mozilla, and Microsoft are coordinating to improve support for new web features.

I’ve ranked my personal top 10 that I’d love to see shipped in the web platform in 2027. Thanks to Sara Soueidan, Ky Decker, and Josh Comeau for sharing your ranking opinions, and inspiring me to write about my own!

1. Customizable/stylable <select> - it’s very tempting to build custom select menus to match the design system, but they’re tricky to get right with accessibility. I’ve used so many inaccessible custom menus in forms, job applications, and search experiences that are primarily designed for mouse use. Including this as a browser standard would be a convenient accessibility win and simplification for component libraries going forward.
2. ariaNotify() - I’ve often needed aria-live regions to announce the heading on search result pages, for example “Showing 1-20 of 400 results”. This works great for announcing changes in search results for non-sighted users when filters are updated. However, there is a scenario where filters change the search results, but the heading live region doesn’t announce a change because there’s the same number of results. Allowing programmatic announcement would reduce the amount of manual work required to build accessible user experiences like this, when used responsibly.
3. JavaScript Temporal - working with time zones using the current Date API is difficult, and makes it tempting to use an npm package to help. I can’t wait for this API to be supported across all browsers.
4. CSS gap decorations - putting borders in the gaps between items is a common design pattern, and usually requires some combination of :first and an ::after element or border to make it happen. Let’s make working with grid and flex layouts a little easier.
5. CSS border-shape property - I recently had to build a container shaped like a speech bubble, with a gradient border around the edge. clip-path didn’t help me, because the border of the clipped element was still a rectangle. Being able to define a custom border shape would make these kind of scenarios easier to style, and enable new creative UI designs.
6. Allow CSS transitioning/animation display and content-visibility - animating an element disappearing can be tricky, because simply setting display:none immediately makes the element disappear. For example, a common place I’ve run into this is closing a full screen mobile navigation menu. Workarounds I’ve implemented include using the GSAP onComplete callback to do the post-animation styling, or by leaving the element in the DOM and making it inert, aria-hidden, and styled with pointer-events: none. Including display in the animation timeline would remove the need for these workarounds.
7. CSS interpolate-size property and calc-size() function - animating to intrinsic sizes like auto or min-content is not currently possible. I wrestled with this when I was trying to do a height-based animation to build the context menus in Immich, and I ended up using JavaScript to manage the height calculations.
8. CSS line-clamp property - Limiting containers to several lines of text is a common ask from designers in my experience, so it would be nice to have easy CSS tooling to style this.
9. CSS flex-wrap: balance - flex-wrap is an great tool for enabling responsive user interfaces, but it can often lead to awkward experiences at some screen sizes where a single element is wrapped to the next line. I’d love the ability to balance these wrapped elements, especially for dynamic CMS-driven content that I can’t build fine-grained breakpoints for.
10. CSS scroll-triggered animations - I often use GSAP ScrollTrigger or IntersectionObserver for scroll-triggered entrance animations. This proposal would eliminate the JavaScript and enable entrance animations with native CSS.